Что значит повторять, пока не достигнет button.length в javascript?

Question

Что значит повторять, пока не достигнет button.length в javascript?

1

У меня есть эта встроенная функция java-script, которая создает абзац и вызывается при нажатии кнопки. То, что я не понимаю, - это код условия в цикле for. Что значит итерации, пока не достигнет button.length? (Увидев, что каждый раз, когда я нажимаю кнопку, eventListener ловит его и печатает текст в браузере до бесконечности).

    <script>
    function createParagraph()
    {
        var para = document.createElement('p');
        para.textContent = 'You Clicked a button!';
        document.body.appendChild(para);
    }       

    var buttons = document.querySelectorAll('button');

    for (var i = 0; i < buttons.length; i++)
    {
        buttons[i].addEventListener('click', createParagraph);
    }
</script>

Ryan Thompson 09 фев. 2018, в 01:05

Источник

0

это перебирает все кнопки и присоединяет к ним прослушиватель событий щелчка - если бы вы не зациклились, как бы вы прикрепили обработчик к более чем одной кнопке?
Jaromanda X 08 фев. 2018, в 23:46
0

buttons.length представляет количество элементов в NodeList . Другими словами, количество элементов button в вашем документе.
Ricky 08 фев. 2018, в 23:57

Теги:

javascript

4 ответа

Ещё вопросы

это перебирает все кнопки и присоединяет к ним прослушиватель событий щелчка - если бы вы не зациклились, как бы вы прикрепили обработчик к более чем одной кнопке?
buttons.length представляет количество элементов в NodeList . Другими словами, количество элементов button в вашем документе.

Kamil Solecki · Answer 1 · 2018-02-08T22-36-00.000Z

Пройдите через это шаг за шагом:

1) Функция createParagraph():

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You Clicked a button!';
  document.body.appendChild(para);
}

Что это значит, создается ли элемент <p>, содержащий сообщение "Вы нажали кнопку!". и добавляет его в DOM.

2) QuerySelector:

var buttons = document.querySelectorAll('button');

Он находит каждый элемент, соответствующий данному селектору - в данном случае - все кнопки. Он возвращает их, в этом случае мы сохраняем их в переменной.

3) Цикл for:

for (var i = 0; i < buttons.length; i++)
{
        buttons[i].addEventListener('click', createParagraph);
}

Это на самом деле очень просто. Он выполняет итерацию для каждой из кнопок в массиве кнопок - это наш массив элементов кнопок, которые мы создали с помощью нашего QuerySelector выше, и добавляет к нему EventListener. В свою очередь, этот EventListener обрабатывает события click, запустив нашу функцию, описанную на шаге 1.

Если вы все это соедините:

Каждый раз, когда вы нажимаете кнопку (любая кнопка на странице), в DOM добавляется элемент <p>, который будет включать сообщение " You Clicked a button! ,

Ele · Answer 2 · 2018-02-08T22-05-00.000Z

Вы не делили HTML.

В принципе, привязка события click ко всем кнопкам вашего HTML.

Посмотрите на этот фрагмент кода

Ваш код привязывает событие click к кнопкам

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You Clicked a button!';
  document.body.appendChild(para);
}

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

<button>
Click me!
</button>
<button>
Click me!
</button>
<button>
Click me!
</button>
<button>
Click me!
</button>
<button>
Click me!
</button>

Maiya · Answer 3 · 2018-02-08T22-00-00.000Z

Наблюдение за некоторыми учебниками по "core javaScript", вероятно, поможет вам. В частности, узнайте о циклах и итерации по массивам.

В вашем коде вы добавляете "event-listener" ко всем своим "кнопкам". Упрощенные шаги для этого:

собрать все элементы кнопки в массив (на самом деле это объект, похожий на массив). document.querySelectorAll( 'кнопка'). Будет выглядеть что-то вроде этого под капотом кода: [{tagName: button}, {tagName: button}, {tagName: button}, {tagName: button}];
Храните этот массив в переменной var buttons = document.querySelectorAll('button');
Теперь кнопки [0] указывают на первый элемент {tagName: button}. кнопки [1] указывают на вторую кнопку в списке и т.д.
button.length указывает, как долго находится массив (именованные кнопки). Вам нужны кнопки [0], кнопки [1], кнопки [2] и т.д., Пока вы не достигнете конца массива.
Когда вы говорите 'кнопки [2].addEventListener(' click ', createParagraph), вы добавляете обработчик' click 'к этой конкретной кнопке.
Вы продолжаете итерацию по длине массива кнопок, потому что вы хотите добавить обработчик "щелчок" ко всем из них.

«В вашем коде вы присоединяете« слушатель событий »ко всем вашим« кнопочным »элементам». Я не видел этого. Спасибо

Jay S · Answer 4 · 2018-02-08T21-10-00.000Z

var buttons = document.querySelectorAll('button');

var кнопки получат массив всех элементов кнопки на странице.
buttons.length - это длина этого array- количества элементов кнопки на странице.

for (var i = 0; i < buttons.length; i++)

Цикл будет повторяться один раз для каждого элемента кнопки, который существует (длина массива кнопок).

buttons[i]

Относится к элементу i-ой кнопки на странице.