单击按钮时调用 Javascript 函数

Question

我有一个 JS 函数，我想在单击按钮时执行它。它基本上是一个搜索框，当单击按钮时，将从输入字段中获取输入的文本（邮政编码），并将其传递给 PHP 脚本，该脚本会将其转换为 lat/long 使用API，然后在嵌入的 Google 地图上输出一个 pin。我已经完成了所有 PHP/API/Map 的事情，并且所有这些都可以用硬编码的邮政编码来处理，但我现在需要从搜索框中提取邮政编码。

查看下面的代码：

Javascript:

var post_search = document.getElementById('post_search');
function useValue() {
    var postcode = post_search.value;
    // use it
    alert(postcode); // just to show the new value & ensure this portion is working
}
post_search.onchange = useValue;  
post_search.onblur = useValue;

HTML:

    <div id="post_search_container">
        <input type="text" id="post_search" name="item" placeholder="Search.."/>
        <input type="button" id="nested_search" value="Search.."/>
        <script type="text/javascript" src="js/post_search.js"></script>
    </div>

我读到我可以使用另一个 "getElementByID" 作为按钮，然后执行代码，但无法弄清楚它是如何工作的。我还读到需要一个 OnClick 事件，但同样无法弄清楚。还值得一提的是，我确实有 jQuery (v2.1.3)，所以如果需要，我可以实现一个 jQuery 方法来实现上述目标。

非常感谢任何帮助，提前致谢。

Answer 1

你的意思是这样的吗？

var button = document.getElementById('nested_search');
button.onclick = useValue;

Answer 2

如果您想在 jquery 中执行此操作，则可以通过以下方式执行：

 $("#buttonId").click(function() {
     //get input text and process
 });

或者，

$("#buttonId").on("click", function() {
    //get input text and process
});

在JavaScript中：

var buttonReference = document.getElementById('nested_search');
buttonReference.onclick = function() {
    //do processing
}

单击按钮时调用 Javascript 函数

Calling Javascript function when button clicked

html

javascript

jquery

onclick