How to hang an event on all checkboxes on a page using JS?

Question

JavaScript

Greetings, tell me how to hang an event on all checkboxes on the page, here is my example but it does not work:

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);

My example throws an Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function

Answer 1

Anton ,
In your case, when you write:

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

When do you write:

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

It is solved by iterating over the array:

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