Estoy usando Javascript (todavía no estoy familiarizado con marcos como Angular) y trato de obtener y mostrar el valor de una entrada de número de mi HTML, pero cuando ejecuto la función que hace esto, el valor predeterminado de "1" de la HTML parece ser el único que se usa, incluso si cambio la entrada en el sitio web a, digamos, 10 haciendo clic en las flechas.
Creo que he escrito el código correctamente en lo que respecta a la sintaxis, por lo que mi único pensamiento es que quizás la entrada deba estar envuelta en algún tipo de formulario, y el botón "girar" cambió a tipo = "enviar"?
Aquí hay un enlace a un codepen con el código roto y algunos fragmentos de las piezas involucradas a continuación.
var displayScreen = document.getElementById("display-message"); var rollButton = document.getElementById("roll-button"); //Variable to tell the rollDice() function how many times to roll dice. var numDice = document.getElementById("num-dice").value; //Dice Array to hold the results of the rollDice() function, gets cleared after each use. var diceTotal = []; //Event listener for the "roll" button rollButton.addEventListener("click", rollDice); //Make this function display a roll result function displayMessage() { displayScreen.innerText = diceTotal[0]; } //Generate a random number between 1 and diceType, and set the rolledNumber variable to its result function rollDice() { //Nothing currently changes numDice, so it keeps default value="1". result = 0; var roll = Math.floor(Math.random() * diceType) + 1; for (var i = 0; i < numDice; i++) { result += roll; } diceTotal[0] = result; displayMessage(); } <div id="dice-display-div"> <!-- We want to display the dice roll total, any applied bonuses, and then the final total together in this div, possibly as separate <h2> elements. --> <h2 id="display-message">Click "Roll" to Begin</h2> </div> <div id="roll-button-div"> <label class="roll-button-label" for="num-dice" id="num-dice-label">Number of Dice: </label> <input class="roll-button-item" type="number" id="num-dice" name="num-dice" value="1" min="1" max="10"> <label class="roll-button-label" for="bonus" id="bonus-label">Bonus (or Negative): </label> <input class="roll-button-item" type="number" id="bonus" name="bonus" value="0" min="-10" max="10"> <button class="roll-button-item" id="roll-button">Roll</button> </div>Primero, debe llamar a su Math.random() dentro del ciclo for, de lo contrario, solo generará aleatoriamente un número, y todos sus dados tendrán ese mismo número. En segundo lugar, debe asignar numDice dentro de su función para que vuelva a verificar y asigne el valor actual en lugar de al comienzo de la representación de la página:
var displayScreen = document.getElementById("display-message"); var rollButton = document.getElementById("roll-button"); //Dice Array to hold the results of the rollDice() function, gets cleared after each use. var diceTotal = []; //Event listener for the "roll" button rollButton.addEventListener("click", rollDice); //Make this function display a roll result function displayMessage() { displayScreen.innerText = diceTotal[0]; } //Generate a random number between 1 and diceType, and set the rolledNumber variable to its result function rollDice() { //Variable to tell the rollDice() function how many times to roll dice. var numDice = document.getElementById("num-dice").value; //assign this upon function call so it checks it each time the button is clicked to get the latest value //Nothing currently changes numDice, so it keeps default value="1". result = 0; var roll = 0 for (var i = 0; i < numDice; i++) { roll = Math.floor(Math.random() * diceType) + 1; //call random on each dice roll result += roll; } diceTotal[0] = result; displayMessage(); }