Почему когда я вешаю событие клика на кнопку, то при загрузке она сразу срабатывает?

Question

[ArtJH]

https://codepen.io/ArtJH/pen/vYGyejE

Почему?

-----
Я разобрался оказывается когда я передаю на клик функцию с параметрами то она сразу вызывается

for(let index = 0; index < btnNextLevel.length; index++){
        btnNextLevel[index].addEventListener('click', nextLevel(btnNextLevel[index]));
    }

-----надо так
for(let index = 0; index < btnNextLevel.length; index++){
        btnNextLevel[index].addEventListener('click', nextLevel );
    }

Вопрос
Как тогда передать параметр?

Answer 1

[0xD34F]

Потому что кто-то не понимает разницы между собственно функцией и результатом её вызова. Вот же позорище.

Оборачивайте вызов функции в другую функцию. Или bind используйте. Или разберитесь, что принимают обработчики событий в качестве параметра, и перепишите функцию так, чтобы не надо было ей передавать элементы btnNextLevel.

Comments

[ArtJH]

Спасибо, но это не помощь

[0xD34F]

ArtJH, а вам как, не стыдно сюда приходить с подобными вопросами?

Дополнил ответ.

[ArtJH]

0xD34F, вот теперь спасибо за ответ.

[Karpion]

0xD34F, Каждый из нас (и каждый из гуру) - когда-то был аналогичным позорищем (с поправкой на то, что он позорился в иных языках - которые были актуальны в то время). Более того: когда-то каждый из нас не умел говорить, а также не умел дойти до туалета и писал прямо в штаны/пелёнки.

[0xD34F]

Karpion, причина косяка из вопроса - в незнании основ. Освоить которые за тот минимум год, что автор занимается js'ом, можно было успеть раз десять.

[Karpion]

0xD34F, Не всем везёт сразу найти хороший учебник и т.б. хорошего наставника.

[0xD34F]

Karpion, повторяю - год. Было бы желание.

[ArtJH]

0xD34F, выскочка

Answer 2

[Алексей Ярков]

Как тогда передать параметр?

Сделать обёртку, которая примет аргумент и вернёт обработчик клика

Comments

[ArtJH]

Спасибо. Можно пожалуйста пример

[Алексей Ярков]

ArtJH,

function ОБЁРТКА(АРГУМЕНТ_ИЗ_ЦИКЛА) {
    return function ОБРАБОТЧИК(event){
        // можно юзать АРГУМЕНТ_ИЗ_ЦИКЛА
    }
}

for(let index = 0; index < btnNextLevel.length; index++){
    btnNextLevel[index].addEventListener('click', ОБЁРТКА(btnNextLevel[index]));
}

Answer 3

[Karpion]

Добавлю свои пять копеек для лучшего понимания вопроса.

В языке Си есть вызов функции (с указанием аргументов; если же их нет - то указывается пустой список аргументов), а есть ссылка на функцию (и аргументы там приткнуть просто некуда).
Естественно, результатом вызова функции м.б. как число, так и что-то иное, в т.ч. ссылка на функцию. Вот это у Вас и происходит.