Почему не работает для всех inputов?

Question

[Smeecy Smeecy]

Изучаю Javascript, хочу сделать, чтобы при отмеченном инпуте выводилось сообщение в консоль. Мой код работает только для первого инпута еще даёт ошибку на target , можете обьяснить что не так?
Код

Answer 1

[hzzzzl]

querySelectorAll чтобы найти все, а не один первый на странице
и потом на каждый повесить слушатель события
https://codepen.io/anon/pen/rREMKb

Comments

[Smeecy Smeecy]

hzzzzl спасибо, странно, делал с querySelectorAll , но ругалось на addEventListener, сейчас всё правильно. А не подскажете почему ругается на target ?

[hzzzzl]

Smeecy Smeecy, а, я не заметил :)
потому что зачем вызов check() в конце скрипта?
получается так, что

function check(e) {
    // e = undefined
    // Cannot read property 'target' of undefined
    if(e.target.checked){
        console.log(e.target);
    }
}

check() // не надо вызывать эту функцию отдельно от слушателя

[Smeecy Smeecy]

hzzzzl, благодарю)

[hzzzzl]

Smeecy Smeecy,

делал с querySelectorAll , но ругалось на addEventListener

смотри :D
document - мамка
querySelector("бутик") - принеси бутик
querySelectorAll("бутик") - принеси все бутики
addEventListener - захавать

querySelector("бутик") тебе принесет один бутик и ты его можешь захавать
querySelectorAll("бутик") принесет все бутики В ТАРЕЛКЕ, и ты не можешь напрямую захавать ничего

поэтому надо пройтись по результату функцией forEach, чтобы повесить евент листенер конкретно на каждый элемент, а не на "тарелку"

.forEach(function(input) {
    input.addEventListener('click', check)
   });

[Smeecy Smeecy]

hzzzzl, лучше любого самоучителя по JS обьяснил))

Answer 2

[Анатолий]

Для начала неплохо бы прочитать документаю по тому методу, который вы вызываете. Ошибка на target при вызове обработчика вручную в конце кода (откуда в этом случае возьмется там event и тем более event.target?
Ну и для input type="checkbox" нужно подписываться на change