Как повесить событие на все чекбоксы на странице через JS?

Question

[Антон]

Приветствую, подскажите как повесить событие на все чекбоксы на странице, вот мой пример но он не работает:

async function upIncome(){
    let response = await fetch('test.php',{
        method: 'POST'
    });
    document.querySelector('.from-server').innerHTML = await response.text();
}
document.querySelectorAll("input[type='checkbox']").addEventListener('click', upIncome);

Мой пример выдает ошибку Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function

Comments

[Алексей Дубровин]

Как вы определили что событие вешается только на первый чекбокс ?
У вас код написан правильно, если эти чекбоксы рендерятся на странице раньше чем скрипт

[Антон]

Алексей Дубровин, Я наверное перепутал, только на первый вешалось через querySelector, а в моем примере почему-то ошибка вылазит: document.querySelectorAll(...).addEventListener is not a function

[Антон]

Алексей Дубровин,

Answer 1

[Алексей Дубровин]

Антон,
В вашем случае когда вы пишете:

// Возвращается dom node - прям этот элемент из DOM
document.querySelector('Ваш элемент') 
// Вы прям на эту ноду вешаете событие
document.querySelector('Ваш элемент').addEventListener('click',f())

Когда же вы пишите:

// Возвращается "Масив" элементов - тип масив
document.querySelectorAll('Ваш элемент')
// У массива нет метода addEventListener - ошибка
document.querySelectorAll('Ваш элемент').addEventListener('click',f())

Решается перебором масива:

document.querySelectorAll('Ваш элемент').forEach(item=>{
// Item - каждый элемент в массиве и он же является node елементом из DOM 
item.addEventListener('click',f())
})

Comments

[Антон]

Спасибо за объяснение, но с вашим примером почему-то при загрузке страницы происходит событие по всем чекбоксам, а дальше клики просто игнорируются, ничего не происходит...

[Алексей Дубровин]

Антон, Это был пример в котором я сразу же вызываю функцию когда её навешиваю
В вашем случае вы должны использовать свою функцию и без вызыва
.addEventListener('click', upIncome);

[Антон]

При загрузке происходят почему-то клики по всем чекбоксам

[Антон]

А дальше клики игнорятся, событие не происходит

[Алексей Дубровин]

Антон, Ответил чуть выше

[Антон]

Алексей Дубровин, так и прописано, вроде-бы

document.querySelectorAll("input[type='checkbox']").forEach(item=>{
// Item - каждый элемент в массиве и он же является node елементом из DOM 
item.addEventListener('click',upIncome())
});

[Антон]

change вместо click не дает результатов

[Алексей Дубровин]

Антон,
Используйте 1 вариант без круглых скобок после upIncome

addEventListener('click', upIncome);//Каждый раз при клике запускать функцию upIncome
addEventListener('click', upIncome());//Вызывается именно в момент создания обработчика и тк как она ничего не возвращает это становиться
addEventListener('click', undefine);

[Евгений]

Антон, вы во время навешивания события вызываете функцию, вам же нужно передать функцию в колбэк) посмотрите внимательно код примера и ваш код)

[Антон]

Алексей Дубровин, спасибо большое, убрал круглые скобки и стало работать как надо по клику и все чекбоксы работают!