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

Question

I'm trying to make a game and a form that gets information from the user via an input. I would like my function that starts the game to run after the user places an input and clicks my "play game" button, but the function that starts the game will run regardless of whether or not the button is pressed. Thanks.

"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

You actually call the startGame function when registering the event. Try wrapping the function with either arrow-function or just a normal funcion:

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

This pattern is also known as Curry .

Answer 2

The curent code immediately invokes your startGame function as you create a subscription to the click event of your button.

change your function to return a callback like so.

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>";

  }

}