Перечислять через элементы, возвращаемые getElementByClassName в Javascript
96 просмотра
2 ответа
У меня есть следующие наценки и скрипты для имитации простого калькулятора
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 Источник Размещён: 12.11.2019 09:39Ответы (2)
2 плюса
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
2 плюса
document.getElementsByClassName()
возвращает массив, похожий на объект, который лучше повторять так:
var buttons = document.getElementsByClassName("number");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", numberClick, false);
}
Вы можете перебирать массивы так, как вы это делали (хотя это и не рекомендуется, потому что он перебирает все перечисляемые свойства, не только элементы массива, которые иногда могут испортить код), но если вы это сделали, то это buttons[btn]
был бы объект, а не тот, который btn
вы пытались использовать.
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- javascript Удаление элементов с помощью Array.map в JavaScript
- javascript Прокрутка переполненных DIV с помощью JavaScript
- javascript API Карт Google - проблемы с классом GLatLngBounds
- javascript Проверка десятичных чисел в JavaScript - IsNumeric ()
- javascript Как я могу украсить код JavaScript с помощью командной строки?
- javascript Динамически загружать файл JavaScript
- javascript Экранирование строк HTML с помощью jQuery
- javascript Обнаружение неопределенного свойства объекта
- javascript Как сравнить HTML-сущность с JQuery
- javascript Есть ли HTML напротив <noscript>?
- javascript Есть ли функция "существует" для jQuery?
- javascript Как заставить клиентов обновлять файлы JavaScript?
- javascript Замена n-го экземпляра совпадения с регулярным выражением в Javascript
- javascript Сделать окно браузера мигающим в панели задач