Почему функция запускается до нажатия кнопки?

Question

Я пытаюсь сдвинуть квадрат вниз после нажатия кнопки.Почему функция выполняется до нажатия кнопки?Что я могу с этим поделать?

Я пытался использовать методы .onclick и .addEventListener.

    <div class="block" id="blockColor"></div>
    <button id="btn">Move</button>

    var pixel=0;
    function theLoop( i ){
      setTimeout( function() {
        document.getElementById("blockColor").style.top = pixel+"px";
        pixel++;
        if ( --i ){
          theLoop(i);
        } 
      }, 50)
    }
    document.getElementById("btn").addEventListener( "click", theLoop(50))

Я ожидаю, что квадрат сместится вниз после нажатия кнопки,но сейчас он движется вниз без щелчка.

Answer 1

Я думаю, вы должны просто дать ссылку на функцию, а не вызывать ее.

document.getElementById("btn").addEventListener("click", theLoop)

Надеюсь, это поможет.

- РЕДАКТИРОВАТЬ - Если вам все еще нужен аргумент, оберните функцию theLoop следующим образом:

document.getElementById("btn").addEventListener("click", () => theLoop( 50 ) )