盡管有我的事件監聽器，但我的 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>";

  }

}