如何从谷歌地图搜索框中捕获价值并推送到新的div标签?

Question

我一般是编码新手，但我有一个关于如何从谷歌地图搜索框中捕获值的问题，以尝试然后动态创建一个div标签，该标签将显示一行，其中包含输入到搜索框中的任何值。

我尝试创建一个.onclick()事件，但事实证明毫无用处，因为搜索框不需要提交按钮来查找结果。

// Adding event listener for when user clicks the add-bttn
$("#search").on("click", function() {
// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = $("#form-control").val();
console.log(itineraryInput);
})

.then(function() {
var row = $("<div>");
row.addClass("attraction");
row.append("<p>" + itineraryInput + "</p>");

$("#trans_first").prepend(row);
});

我在控制台中遇到的错误是：

未捕获的类型错误： $(...(。开(...则不是一个函数。

我只是想从搜索框中获取值，但不知道如何获得该结果。

Answer 1

你不需要使用，你可以把你的函数放在点击事件侦听器中：

// Adding event listener for when user clicks the add-bttn
$("#search").on("click", function() {
// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = $("#form-control").val();
console.log(itineraryInput);
var row = $("<div>");
row.addClass("attraction");
row.append("<p>" + itineraryInput + "</p>");
$("#trans_first").prepend(row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> Search
<input id="form-control" >
</label>
<button id="search">Search </button>
<div id="trans_first">
</div>