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