Перечислять через элементы, возвращаемые getElementByClassName в Javascript

96 просмотра

2 ответа

8015 Репутация автора

У меня есть следующие наценки и скрипты для имитации простого калькулятора

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:

Сценарии пытались прикрепить обработчик события нажатия к кнопкам.

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, код работал.

Не могли бы вы объяснить, почему?

Автор: Toan Nguyen Источник Размещён: 18.03.2014 09:44

Ответы (2)

2 плюса

476096 Репутация автора

document.getElementsByClassName() возвращает массив, похожий на объект, который лучше повторять так:

var buttons = document.getElementsByClassName("number");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", numberClick, false);
}

Вы можете перебирать массивы так, как вы это делали (хотя это и не рекомендуется, потому что он перебирает все перечисляемые свойства, не только элементы массива, которые иногда могут испортить код), но если вы это сделали, то это buttons[btn]был бы объект, а не тот, который btnвы пытались использовать.

Автор: jfriend00 Размещён: 18.03.2014 09:47

2 плюса

273521 Репутация автора

Решение

NodeList похож на массив, поэтому следует использовать обычный цикл for, а querySelectorAll лучше поддерживает

window.onload = function() {

    var buttons = document.querySelectorAll("number");

    for (var i=buttons.length; i--;) {
        buttons[i].addEventListener("click", numberClick, false);
    }
}

При использовании циклов for-in это 

for ( key in object )

так было бы

for (var btn in buttons) {
    buttons[btn].addEventListener
}
Автор: adeneo Размещён: 18.03.2014 09:48
Вопросы из категории :
32x32