Почему передается i всем параграфам?

Question

[Name Surname]

Добрый день, тостерята. Кратко о ситуации которая сложилась у меня . Есть параграф и подпараграф, мне нужно что бы при клике на параграф у его дочернего елемента ( соответственно подпараграфа) появился еще один класс ну или удалился. Все вроде бы работало когда он был один, но когда параграфов стало больше чем один, мой код ( в 5 строк ) сломался.

let buts = document.querySelectorAll('.answer-page');    
let togs = document.querySelectorAll('.answer-subpage')
    for (let i = 0; i < buts.length; i++) {
        buts[i].addEventListener('click', Addclass(i));
        
    }
function Addclass (i) {

    togs[i].classList.toggle("active")
}

Я не догадался до иного решения чем передать тоже i через свойства функции дочернему параграфу, но вместо того что бы при клике на основной параграф открывался дочерний, они изначально открыты, и мне это не подходит. Может у вас есть какие-то идеи? ссылку конечно же оставлю.

Answer 1

[Владимир Проскурин]

buts[i].addEventListener('click', Addclass(i));
Так вы вызываете функцию Addclass, и ее возвращаемое значение передаете в addEventListener, а должны передавать функцию, которую нужно вызвать при клике.
Вообще, вам не нужен togs, просто у текущего кликнутого элемента берите children, и добавляйте нужный класс.

Answer 2

[hzzzzl]

buts[i].addEventListener('click', Addclass(i));
// когда выполнится клик - выполнить функцию, которую вернет Addclass(i)

for (let i = 0; i < buts.length; i++) {
        buts[i].addEventListener('click', () => Addclass(i));
// когда выполнится клик - выполнить функцию, которую вернет безыменная функция
// а вернет она Addclass(i)
    }

Comments

[Name Surname]

Вот как ты до этого догадался? Ну рили, я бы и не подумал. Это со стрелочными функциями такое делать получается? Если можешь дай пару каких-то дельных советов на будущее.

[hzzzzl]

Егор Глебенко, да потому что все такое писали, я тоже :D

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

можно еще прокинуть параметр i как-то так
https://developer.mozilla.org/ru/docs/Web/JavaScri...

buts[i].addEventListener('click', Addclass.bind(null, i));