Creating a random number using JavaScript and returning in HTML without using form

Question

Is it possible to generate a random number from JavaScript to HTML using button onclick but return it through a <div> ? I have looked at other similar questions but they all seem to use either <input> or <form>. I am not getting any errors in my browser, when I try this code but the output is coming from the <div> saying 'undefined' as opposed to a number so I'm obviously not defining number but I'm just a bit confused by JavaScripts syntax.

/// HTML ///

<html>
<head>
<script type="text/javascript" src="randRandomScript.js">
</script>    
</head>

<body>

 <button name="randNumberButton" onclick="randNumberScript()" >Click for Number</button>

<div id="number"></div>
</body>

</html>

/// JavaScript ///

var randomNumberObject = math.floor(math.random()*10);

 function randNumberScript () {

document.getElementById("number").innerHTML = randomNumberObject;

}

A side note: if you want to set the text inside an HTML element, it is better to set .textContent than .innerHTML. textContent doesn’t try to interpret the string as HTML, so it runs faster, and it will let you include characters like <>. — Rory O'Kane
– Rory O'Kane, Commented May 21, 2016 at 5:43
Interesting, is there any occasion when innerHTML would be better to use? — cigarette_unicorn
– cigarette_unicorn, Commented May 21, 2016 at 5:46
innerHTML is a convenient way to insert multiple HTML elements inside an element, such as the secret numbers are <b>5</b> and <b>7</b>. It can be a quick way to test some code to set element contents, but usually you should use other methods once you understand the structure you want. The problem with innerHTML is that if the string you are assigning contains user input, for example if the user typed in 5 and 7, then the user could type HTML like <h1>5</h1> and mess up the page. — Rory O'Kane
– Rory O'Kane, Commented May 21, 2016 at 10:03

Rayon · Accepted Answer · 2016-05-21 05:30:35Z

1

Use randomNumberObject variable as local-variable or else it will not be updated every time button clicked.

Note: Correct the typo @ math.. It is Math

function randNumberScript() { //Why are you accepting a argument ?
  var randomNumberObject = Math.floor(Math.random() * 10); //typo at Math
  document.getElementById("number").innerHTML = randomNumberObject;
}

<button name="randNumberButton" onclick="randNumberScript()">Click for Number</button>

<div id="number"></div>

answered May 21, 2016 at 5:30

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cigarette_unicorn Over a year ago

Brilliant! This worked perfectly. Although I'm a bit disappointed that I was so close to getting there myself.. Can I ask why it needs to be used locally?

Rayon Over a year ago

@eainnem Global variable will not affect inside the function..To get the new value, handle it inside the function..

SaiKiran · Accepted Answer · 2016-05-21 05:31:17Z

0

Use this instead your code because your code is using invalid syntax and also no need to write the javascript function in seperate file ,just write the function in a script tag just above the closing body tag().

Math.floor((Math.random() * 10) + 1);

answered May 21, 2016 at 5:31

SaiKiran

6,53412 gold badges48 silver badges77 bronze badges

Collectives™ on Stack Overflow

Creating a random number using JavaScript and returning in HTML without using form

/// HTML ///

/// JavaScript ///

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

/// HTML ///

/// JavaScript ///

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related