No puede cambiar el valor predeterminado de la entrada de números en Javascript

Question 1

Estoy usando Javascript (que no están familiarizados con los marcos de trabajo como Angular todavía), y tratando de obtener y mostrar el valor de un número de entrada de mi HTML, pero cuando ejecuto la función que hace esto, el valor predeterminado de "1" en el HTML, parece ser el único utilizado, incluso si tengo que cambiar la entrada en el propio sitio web de, digamos, un 10 por clic en las flechas.

Creo que he escrito correctamente el código, tan lejos como la sintaxis, así que mi único pensamiento es que tal vez la entrada tiene que estar envuelto en un formulario de algún tipo, y el "rollo" botón cambia a type="submit"?

Aquí hay un enlace a un codepen con el código roto, y algunos fragmentos de las piezas 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>

Question 2

En primer lugar, usted debe llamar a su Matemáticas.aleatorio() dentro del bucle, de lo contrario sólo va a generar aleatoriamente un número, y todos sus dados tenga el mismo número. Segundo, usted debe asignar numDice dentro de su función, con lo que se vuelve a revisar y le asigna el valor actual en lugar de al inicio de la página de render:

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();
}

Ryan Millares · Answer 1 · 2021-11-22T23:47:06

En primer lugar, usted debe llamar a su Matemáticas.aleatorio() dentro del bucle, de lo contrario sólo va a generar aleatoriamente un número, y todos sus dados tenga el mismo número. Segundo, usted debe asignar numDice dentro de su función, con lo que se vuelve a revisar y le asigna el valor actual en lugar de al inicio de la página de render:

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();
}

No puede cambiar el valor predeterminado de la entrada de números en Javascript

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría