How do I store an input into a variable in HTML and Javascript?

Question

I am making a game that says a random number to click and then it tells you when it is right or wrong. I want the user to decide how many rounds they want and input it into the program.

//takes the number of rounds and puts it into a variable so it shows the amount of questions you want
	var numberOfRounds = parseInt( document.getElementById( "numberOfRounds" ).value ) //puts the input numberOfRounds in a variable.
	console.log(numberOfRounds);
	randomNumber = ( Math.floor(Math.random() * 6));
	console.log(randomNumber);
	buttonColors();

<font size="6"><center><strong><p id="startScreen">Welcome to the Random Color Game.</p></strong></center></font>
<font size="4"><center><p id="startScreen2">How many many rounds of the game would you like?</p>
<form id="numberOfRounds"><p id="startScreen3">I would like <input id="numberOfRounds" type="number" min="1" max="20" name="numberOfRounds" style = "width:100px; height:50px;"> rounds.</p>
<p id="startScreen5">To start playing the game, push begin.</p></center></font>

It's not clear what exactly you are asking, also your html appears to be incomplete. Also what is the buttonColors function and what does it do? — NMunro
– NMunro, Commented Jan 29, 2016 at 16:01
document.getElementById( "numberOfRounds" ) gives you the first element found, i.e. form. That doesn't have value though. ids must be unique within the document. — Teemu
– Teemu, Commented Jan 29, 2016 at 16:08

rphv · Accepted Answer · 2016-01-29 23:49:32Z

Your code is more-or-less correct - document.getElementById("numberOfRounds").value will get the value from the input element, assuming that's the only element with id="numberOfRounds" (ids should be unique in the document).

I've refactored your code a bit and added a "Begin" button, which gets the value from the <input> element and displays it to the user.

//puts the input numberOfRounds in a variable.
function getNumberOfRounds() {
  var setNumberOfRoundsElement = document.getElementById("setNumberOfRounds");
  var myNumberOfRoundsElement = document.getElementById("myNumberOfRounds");
  var numberOfRounds = parseInt(setNumberOfRoundsElement.value);
  myNumberOfRoundsElement.innerHTML = "You chose " + numberOfRounds + " rounds!";
}

body {
  text-align: center;
}

<h1>Welcome to the Random Color Game.</h1>
<div id="myNumberOfRounds">
  How many many rounds of the game would you like?
  <p>
    I would like
    <input id="setNumberOfRounds" type="number" min="1" max="20" name="numberOfRounds"> 
    rounds.
  </p>
  To start playing the game, push begin.
  <p>
    <button onclick="getNumberOfRounds()">Begin</button>
  </p>
</div>

Collectives™ on Stack Overflow

How do I store an input into a variable in HTML and Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related