尽管有我的事件监听器，但我的 function 仍然会运行

Question

我正在尝试制作一个游戏和一个通过输入从用户那里获取信息的表单。 我希望启动游戏的 function 在用户输入并单击我的“玩游戏”按钮后运行，但是无论是否按下按钮，启动游戏的 function 都会运行。 谢谢。

"use strict";

window.onload = main;



function main()
{

    var symbolAmount = 0;

    document.getElementById("numSymbols").value = symbolAmount;

    //symbolAmount cannot be greater than 8
    if (symbolAmount > 8)
    {
        symbolAmount = 8;
    }

    document.getElementById('startButton').addEventListener("click", startGame(symbolAmount));

}


function startGame(symbolAmount)
{
    //getting rid of the startup form
    

    //symbols array being loaded and the various variables for the table setup
    var symbols = new Array("!", "@", "#", "$", ";", "+", "*", "&");
    var gameHtmlInfo = "<table id= 'gameTable' \
    style= \
    'width:60%; \
    margin-left:20%:\
    max-height:60%; \
       '>";


    var columnCount;    
    var rowCount;

    //setting the columns and rows for the table 
    if ((symbolAmount*2 === 4) || (symbolAmount*2 === 16))
    {
        columnCount = (symbolAmount/2);
        rowCount = (symbolAmount/2);
    }
    else 
    {
        columnCount = symbolAmount;
        rowCount = 2;
    }

    //making the tables

    for(var i = 0; i < rowCount; i++)
    {
        gameHtmlInfo += "<tr class='rows'>";
        //making the cells
        for(var j = 0; j < columnCount; j++)
        {
            gameHtmlInfo += "<td class='card'>" + symbols[j] + "</td>";
            symbols.shift();
        }


        gameHtmlInfo += "</tr>";
    }

    gameHtmlInfo += "</table>";


}

Answer 1

你实际上在注册事件时调用了startGame function。 尝试用箭头函数或普通函数包装 function：

document.getElementById('startButton').addEventListener("click", () => startGame(symbolAmount));

这种模式也被称为咖喱。

Answer 2

当您创建对按钮点击事件的订阅时，当前代码会立即调用您的startGame function。

更改您的 function 以返回这样的回调。

function startGame(symbolAmount) {
  return function () {
    //getting rid of the startup form


    //symbols array being loaded and the various variables for the table setup
    var symbols = new Array("!", "@", "#", "$", ";", "+", "*", "&");
    var gameHtmlInfo = "<table id= 'gameTable' \
    style= \
    'width:60%; \
    margin-left:20%:\
    max-height:60%; \
       '>";


    var columnCount;
    var rowCount;

    //setting the columns and rows for the table 
    if ((symbolAmount * 2 === 4) || (symbolAmount * 2 === 16)) {
      columnCount = (symbolAmount / 2);
      rowCount = (symbolAmount / 2);
    }
    else {
      columnCount = symbolAmount;
      rowCount = 2;
    }

    //making the tables

    for (var i = 0; i < rowCount; i++) {
      gameHtmlInfo += "<tr class='rows'>";
      //making the cells
      for (var j = 0; j < columnCount; j++) {
        gameHtmlInfo += "<td class='card'>" + symbols[j] + "</td>";
        symbols.shift();
      }


      gameHtmlInfo += "</tr>";
    }

    gameHtmlInfo += "</table>";

  }

}