Javascript onclick函数html

Question

我正在尝试自定义一些公共git，并且由于我是Jquery / Javascript中的菜鸟，所以我不知道如何将onclick函数正确绑定到按钮，以便它知道如何调用getStates（）函数。 是的，我知道我可以删除$(function(){并且它可以工作，但是我希望能够在jquery函数中调用它吗？

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>US Hospitals</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'>
</script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/lib/neo4j-web.min.js"></script>
</head>
<body>
<div id="desc">
    <div class="row top-row">
         <div class="col-xs-6">
            <h3 class="heading">US Hospitals</h3>
        </div>
        <div class="col-xs-6">
            <p class="lead"></p>
        </div>
        <button onclick="$.getStates();">Load States!</button>
    </div>
</div>
<div id='map'></div>
<script>
 $(function(){

    function getStates() {    
        session
            .run(districtQuery)
            .then(function(result){
                result.records.forEach(function(record) {
                     drawPolygons(parseWKTPolygons(record.get("wkt")), 
record.get("text"));

                });
            })
    }
</script>
</body>
</html>

我收到错误消息：

未捕获的TypeError：$ .getStates不是HTMLButtonElement.onclick（index.html：51）上的函数

Answer 1

$(function () { })

这是告诉解释器在页面准备好后立即运行任何JavaScript / jQuery代码。 通常将其称为onready函数。 您通常不会在此处创建其他函数。

去掉：

$(function () { })

同样，您创建onclick事件的方式也是错误的。 使用getStates()代替$.getStates()

因此，总的来说，您的代码应作如下更改：

<button onclick="getStates();">Load States!</button>

<script>
function getStates() {    
    session
        .run(districtQuery)
        .then(function(result){
            result.records.forEach(function(record) 
            {
                 drawPolygons(parseWKTPolygons(record.get("wkt")), 
                 record.get("text"));

            });
        });
}
</script>

您可以解决的另一种方法是保留就绪功能并在其中创建click事件。 尽管如此，您的getStates（）函数仍需要放置在onready函数之外，并且您将从按钮元素中删除onclick 。

例如：

<button>Load States!</button>

<script>
$(function() {
    $('button').click(function () {
        getStates();
    });
});

function getStates() {    
    session
        .run(districtQuery)
        .then(function(result){
            result.records.forEach(function(record) {
                 drawPolygons(parseWKTPolygons(record.get("wkt")), 
                 record.get("text"));

            });
        })
}
</script>

现在，如果此页面上有多个按钮，则需要添加一个ID或类来区分它们。 然后，将$('button')替换为例如：如果使用ID， $('#load_states_button)如果使用类，则将$('.button_class') $('#load_states_button) 。

这些都产生相同的结果，因此如何做只是个人喜好问题。

希望这对您有所帮助！ 如果您有任何疑问，请告诉我。 :)

Answer 2

您可以使函数成为全局函数：

window.getStates = function getStates() {
    ...
};

然后，您可以简单地在onclick属性中使用getStates() 。

当然，更干净的方法是使用jQuery的$.click()从JavaScript本身绑定事件。 这将需要您向按钮标签添加id属性，或通过其他方式从jQuery进行标识。

Answer 3

从$(function() { ... })取出$(function() { ... }) ，因为从onclick调用的函数必须在全局范围内。 并将其称为getStates() ，而不是$.getStates()

<script>
function getStates() {    
    session
        .run(districtQuery)
        .then(function(result){
            result.records.forEach(function(record) {
                drawPolygons(parseWKTPolygons(record.get("wkt")), 
                record.get("text"));
            });
        })
}
</script>

Answer 4

您可以在按钮上添加一个id并使用如下代码：

<button id="load-states">Load States!</button>

Javascript：

 $(function() {
   function getStates() {
    session
        .run(districtQuery)
        .then(function(result){
            result.records.forEach(function(record) {
                 drawPolygons(parseWKTPolygons(record.get("wkt")),record.get("text"));
            });
        })
   }
// Adding event onClick to button
$('#load-states').on('click', getStates);                            

});

Javascript onclick函数html

问题描述

4 个解决方案

解决方案1
2 2017-04-07 22:42:48

解决方案2
1 2017-04-07 22:25:40

解决方案3
1 2017-04-07 22:26:49

解决方案4
1 已采纳 2017-04-07 22:39:04

Javascript onclick函数html

问题描述

4 个解决方案

解决方案1 2 2017-04-07 22:42:48

解决方案2 1 2017-04-07 22:25:40

解决方案3 1 2017-04-07 22:26:49

解决方案4 1 已采纳 2017-04-07 22:39:04

解决方案1
2 2017-04-07 22:42:48

解决方案2
1 2017-04-07 22:25:40

解决方案3
1 2017-04-07 22:26:49

解决方案4
1 已采纳 2017-04-07 22:39:04