枚举Javascript中getElementByClassName返回的元素 [英] Enumerate through elements returned by getElementByClassName in Javascript
问题描述
我有以下标记和脚本来模拟一个简单的计算器
I have the following markups and scripts to simulate a simple calculator
HTML:
<input id="txtResult" type="text" readonly="readonly" /><br />
<input id="txtInput" type="text" /><br />
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button><br />
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button><br />
<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button><br />
<button id="btnClear">C</button>
<button id="btn0" class="number">0</button>
<button id="btnClearEntry">CE</button><br />
<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
Javascript:
Javascript:
脚本试图将click事件处理程序附加到按钮。
The scripts tried to attach a click event handler to the buttons.
window.onload = function()
{
var buttons = document.getElementsByClassName("number");
for (var btn in buttons)
{
console.log(btn); //print the value of "buttons", i.e 1, 2 ,3
btn.addEventListener("click", numberClick, false); // JavaScript runtime error: Object doesn't support property or method 'addEventListener'
}
//However accessing an element directly works !!!
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click", numberClick, false);
}
function numberClick()
{
var input = document.getElementById("txtInput");
input.value = input.value == "0" ? this.innerText : input.value + this.innerText;
}
这里的问题是当我循环按钮并尝试附加事件时处理程序,它抛出异常。但是,当使用getElementById直接检索按钮时,代码有效。
The problem here is when I looped through the buttons and tried to attach the event handler, it threw an exception. However, when a button was retrieved directly by using getElementById, the code worked.
你能解释一下原因吗?
推荐答案
nodeList是类似数组的,所以应该使用常规for循环,querySelectorAll有更好的支持
A nodeList is array-like, so a regular for loop should be used, and querySelectorAll has better support
window.onload = function() {
var buttons = document.querySelectorAll("number");
for (var i=buttons.length; i--;) {
buttons[i].addEventListener("click", numberClick, false);
}
}
使用for-in循环时,它是
When using for-in loops, it's
for ( key in object )
所以它是
for (var btn in buttons) {
buttons[btn].addEventListener
}
这篇关于枚举Javascript中getElementByClassName返回的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!