JavaScript按鈕事件處理程序不工作

我正在學習javascipt，現在我有一段代碼，但我無法獲得此工作，JavaScript未執行。我已經在網上搜索，但我找不到答案。也許你們可以幫助我。JavaScript按鈕事件處理程序不工作

HTML

<html> 
<head> 
    <title>Text Game</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript" src="javascript.js"></script> 
</head> 
<body> 
     <button><span id="click">0</span></button> 
</body> 
</html>

的Javascript

// Variables 
var waarde = { 
    amount:2 
}; 

$(document).ready(function() { 
    updateValues(); 
}); 

function updateValues() { 
    document.getElementById("click").innerHTML = waarde.amount; 
} 

$('#click').click(function() { 
    waarde.amount = waarde.amount + 1; 
    updateValues(); 
});

來源

2016-06-20 Stixs

+11

作爲一位JavaScript開發人員，我喜歡這個標題。 :) – Veera

你有任何錯誤？ – Cristy

你是什麼意思不工作。請明確說明。另外，在使用JS時總是檢查你的瀏覽器控制檯。對於初學者來說，沒有'$（document）.ready（''如果你的'.click（）'處理程序在外面。' –

你有幾個問題在這裏：

問題＃1：

元素不會在DOM存在綁定到尚未，所以做任何或所有以下內容：

將script標籤移至頁腳，即關閉</body>標籤之前（無論如何都是最佳做法）。
使用event delegation綁定未來元素上的事件。
將所有JavaScript放在ready處理程序中。

問題2：

你應該不是button中的元素上的click事件處理程序綁定，它不會在規範兼容的瀏覽器工作爲button消耗的情況下，它不會傳播給孩子們。

參考見HTML5 spec for button：

內容模型：

段落式內容，但必須有沒有交互式內容後裔。

而是將點擊事件處理程序綁定到button本身。

// Variables 
 
var waarde = { 
 
    amount: 2 
 
}; 
 

 
$(document).ready(function(){ 
 
    updateValues(); 
 
}); 
 

 
function updateValues(){ 
 
    document.getElementById("click").innerHTML = waarde.amount; 
 
} 
 

 
// Binding to the button element using event delegation. 
 
$(document).on('#button').click(function(){ 
 
    waarde.amount = waarde.amount + 1; 
 
    updateValues(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="button"><span id="click">0</span></button>

同樣，除非你需要別的東西span元素，你可以擺脫它，只是使用：

document.getElementById("button").innerHTML = waarde.amount;

來源

2016-06-20 16:50:42

謝謝你的解釋和例子，現在我知道該怎麼做了。 – Stixs

你應該把這個代碼：

$('#click').click(function(){ 
    waarde.amount = waarde.amount + 1; 
    updateValues(); 
});

內$(document).ready(function(){})功能。 $('#click')尚未在DOM中。

來源

2016-06-20 16:45:20 aprok

您應該將其包裝在ready方法中！

// Variables 
    var waarde = { 
     amount:2 
    }; 

    $(document).ready(function() { 

     $('#click').click(function() { 
     waarde.amount = waarde.amount + 1; 
     updateValues(); 
     }); 
    }); 

    function updateValues() { 
    document.getElementById("click").innerHTML = waarde.amount; 
    }

這裏是一個codepen鏈接http://codepen.io/anon/pen/vKXQza

來源

2016-06-20 16:49:03 akinjide

兩點：

你應該把你的jQuery事件監聽器放在document.ready中。

無法保證在跨度上工作點擊事件。

// Variables 
 
var waarde = { 
 
amount:2 
 
}; 
 

 
$(document).ready(function(){ 
 
updateValues(); 
 

 
$('#click2').click(function(){ 
 
waarde.amount++; 
 
updateValues(); 
 
}); 
 

 
}); 
 

 
function updateValues(){ 
 
document.getElementById("click2").innerHTML = waarde.amount; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<button id="click2">0</button>

來源

2016-06-20 16:51:11 Mojtaba

與您的代碼的問題是JavaScript時加載的js文件你沒有分配一個事件處理程序。應該在ready函數中調用它。

var waarde = {  
    amount:2  
}; 

$(document).ready(function(){  
    $('#click').click(function(){ 

     waarde.amount = waarde.amount + 1;  
     updateValues();  
    }); 

}); 

function updateValues(){  
    document.getElementById("click").innerHTML = waarde.amount;  
}

來源

2016-06-20 16:52:56 sam

你必須寫「Click」事件中的document.ready

var waarde = { 
     amount: 2 
    }; 

    $(document).ready(function() { 
     $('#click').click(function() { 
      waarde.amount = waarde.amount + 1; 
      updateValues(); 

     }); 
     updateValues(); 
    }); 

    function updateValues() { 
     document.getElementById("click").innerHTML = waarde.amount; 
    }

來源

2016-06-20 16:59:13 Ram

你可以看到你的問題的解決方案是here

你缺少按鈕單擊事件中$(document).ready(function(){}(;

來源

2016-06-20 17:40:59 Developer

JavaScript按鈕事件處理程序不工作

回答

相關問題