Javascript onclick函数html_Javascript_Jquery_Html

Javascript onclick函数html

javascript jquery html

Javascript onclick函数html,javascript,jquery,html,Javascript,Jquery,Html,我试图自定义一些公共git，因为我是Jquery/Javascript中的noob，所以我不知道如何将onclick函数正确绑定到按钮，以便它知道如何调用getStates（）函数。是的，我知道我可以删除$（function（）{，它会工作，但我希望能够在jquery函数中调用它 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>US Hospitals</ti

我试图自定义一些公共git，因为我是Jquery/Javascript中的noob，所以我不知道如何将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>


美国医院
美国医院

加载状态！
$（函数（）{
函数getStates（）{
一场
.run（districtQuery）
.然后（函数（结果）{
result.records.forEach（函数（记录）{
drawPolygons（parseWKTPolygons（record.get（“wkt”）），
记录。获取（“文本”）；
});
})
}

我得到的错误是：

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

您可以将函数设置为全局函数：

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

然后，只需在

onclick

属性中使用

getStates（）

当然，更简洁的方法是使用jQuery从JavaScript本身绑定事件。这需要您向按钮标记添加

id

属性，或者以其他方式从jQuery中识别它。

从

$（function（）{…}）中取出函数

，因为从

onclick调用的函数必须在全局范围内。并将其称为getStates（）
，而不是$.getStates（）


函数getStates（）{
一场
.run（districtQuery）
.然后（函数（结果）{
result.records.forEach（函数（记录）{
drawPolygons（parseWKTPolygons（record.get（“wkt”）），
记录。获取（“文本”）；
});
})
}
您可以在按钮上添加一个id，并使用如下内容：
<button id="load-states">Load States!</button>

这是告诉解释器在页面准备好后立即运行任何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>

现在，如果此页面上有多个按钮，则需要添加一个ID或类来区分它们。然后，将$（'button'）
替换为例如：$（'load#states_按钮）
如果使用ID，或者$（'button_class'）
（如果使用类）
这些都会产生相同的结果，因此如何做到这一点只是个人喜好的问题
希望这有帮助！如果您有任何问题，请告诉我。：因为jquery没有getStates方法。将其包装到document.ready中并不能做到这一点。请删除document.ready代码并更改单击以仅调用该方法。
$(function () { })

$(function () { })

<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>

<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>