Estoy tratando de hacer un juego y un formulario que obtenga información del usuario a través de una entrada. Me gustaría que mi función que inicia el juego se ejecute después de que el usuario ingrese una entrada y haga clic en mi botón "jugar", pero la función que inicia el juego se ejecutará independientemente de si se presiona o no el botón. Gracias.
"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>"; }De hecho, llamas a la función startGame cuando registras el evento. Intente envolver la función con la función de flecha o simplemente con una función normal:
document.getElementById('startButton').addEventListener("click", () => startGame(symbolAmount));Este patrón también se conoce como Curry .
El código actual invoca inmediatamente su función startGame a medida que crea una suscripción al evento de clic de su botón.
cambie su función para devolver una devolución de llamada como esa.
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>"; } }