如何將事件偵聽器添加到JavaScript中的許多按鈕？
[英]How to add event listener to many buttons in JavaScript?
問題描述
這是我的代碼。 它使用JavaScript正確添加了按鈕，但事件偵聽器無法正常工作。 文本區域中的輸出始終為button100 ，無論我單擊哪個按鈕。 好吧，單擊按鈕對於任何一個按鈕都不會改變任何東西，這使我認為未正確添加偵聽器。
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler(button);
document.getElementById("theBody").appendChild(button);
}
function clickHandler(button) {
console.log('clicked');
var value = button.value;
debugConsole.value = value;
}
</script>
<body>
</html>
我不確定錯誤在哪里。 for循環不應該將clickHandler（）添加到所有按鈕嗎？
4 個解決方案
解決方案1
3 已采納 2014-08-22 22:25:54
您的代碼：
button.onclick = clickHandler(button);
沒有將功能clickHandler分配給該事件，而是分配了調用clickHandler的返回值的結果。 結果為undefined或null，因為該函數沒有顯式返回。
這就是你所需要的。
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler;
document.getElementById("theBody").appendChild(button);
}
function clickHandler(event) {
console.log('clicked');
var value = event.target.value;
debugConsole.value = value;
}
</script>
<body>
</html>
我必須仔細檢查event.target.value，但這就是您需要的要點。
解決方案2
1 2014-08-22 22:26:17
您在添加（）時正在執行clickHandler； 您只需按名稱指定回調：
button.onclick = clickHandler;
您都可以通過傳遞（e）來始終找到觸發事件的元素，因此clickHandler應該這樣做：
function clickHandler(e) {
var originElement = e.target;
}
解決方案3
0 2014-08-22 22:31:49
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler;
document.getElementById("theBody").appendChild(button);
}
function clickHandler() {
console.log(this.value);
document.getElementById('debugConsole').value = this.value;
}
</script>
<body>
</html>
解決方案4
0 2014-08-22 22:33:37
onclick是一個函數，因此您應該傳遞值button.onclick = function而不是button.onclick = function(node) 。
這是正確的方法
的HTML
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler;
document.getElementById("theBody").appendChild(button);
}
function clickHandler(event) {
document.getElementById('debugConsole').value = event.target.value;
}
</script>
<body>
</html>
演示：
如何添加事件偵聽器以使用常規 javascript 檢查單選按鈕？
[英]How do I add an event listener for checking radio buttons using regular javascript?
如何在 Javascript 中為 onclick PopUp 添加事件監聽器？
[英]How to add event Listener for onclick PopUp In Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.