Блог

Главная - Вопросы по программированию - Прослушиватель событий не работает с некоторыми элементами HTML

Прослушиватель событий не работает с некоторыми элементами HTML

#javascript #html

#javascript #HTML

Вопрос:

У меня есть 2 группы кнопок HTML, все с классом btn .

      const btn = document.querySelectorAll('.btn');
        const btnArray = Array.from(btn);
        
        btnArray.forEach((item) => {
          item.addEventListener('click', () => {
            console.log('clicked');
            console.log(item.value)
          });
        }); 
 <div class="calculator">

    <div class="display">
        <p class="output">YES</p>
    </div>

        <div class="operations">
            <input type="submit" class="btn add" value=' '>
            <input type="submit" class="btn subtract" value='-'>
            <input type="submit" class="btn multiply" value='x'>
            <input type="submit" class="btn divide" value=amp;divide;>
            <input type="submit" class="btn clear" value='CLEAR'>
        </div>

        <div class="calcBody">
            <input type="submit" class="btn seven" value='7'>
            <input type="submit" class="btn eight" value='8'>
            <input type="submit" class="btn nine" value='9'>
            <input type="submit" class="btn four" value='4'>
            <input type="submit" class="btn five" value='5'>
            <input type="submit" class="btn six" value='6'>

            <input type="submit" class="btn one" value='1'>
            <input type="submit" class="btn two" value='2'>
            <input type="submit" class="btn three" value='3'>
            <input type="submit" class="btn zero" value='0'>
            <input type="submit" class="btn period" value='.'>
            <input type="submit" class="btn off" value='ON/OFF'>
        </div>
</div>

Это работает только с кнопками в calcBody div, а не с кнопками в operations div. Тем не менее, когда я console.log(btnArray) показываю все кнопки (что странно).

Может кто-нибудь сказать мне, почему? Спасибо.

Комментарии:

1. почему вы используете Array. если вы можете напрямую перебирать его в своем фрагменте, вы можете правильно нажимать каждую кнопку

2. Я действительно не понимаю проблемы, я протестировал ваш код, и он работает без каких-либо проблем. Даже те, которые находятся за пределами calcBody.

3. «Это работает только с кнопками в calcBody» Откуда вы знаете? Это неправильно, если вы скопируете этот код и запустите его в codepen, он одинаково работает для всех кнопок

4. Я думаю, что это работает хорошо

5. По какой-то причине он функционирует в codepen, но не в консоли, когда я открываю файл в Chrome

Ответ №1:

работает отлично! Я проверил это в Google Chrome.

Метки: