Generating a random number in JavaScript

Question

All I'm trying to do is have the user click a button to generate a random number. It seems to work, but the number only displays for a second before disappearing. Here is my code.

<!DOCTYPE html>

<head>
</head>

<body>

<h3>
This is a random number generator!
</h3>

<form onsubmit= "randomNumber()">
<input type="submit" value="Click me!">
</form>

<script>
function randomNumber() {
    document.write(Math.floor(Math.random() * 10));
}
</script>

<p id="number">
</p>
</body>
</html>

You need to prevent the form from submitting, and [you should not use `document.write`](http://stackoverflow.com/q/802854/1048572), as it purges the current page. — Bergi, Oct 26 '15 at 23:07
Do not use document.write http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — epascarello, Oct 26 '15 at 23:07

Nina Scholz · Accepted Answer · 2015-10-27T07:49:41.183

4

You need

<form onsubmit="randomNumber(); return false;">

to prevent a new load of the page and

function randomNumber() {
    document.getElementById('number').innerHTML = Math.floor(Math.random() * 10);
}

to set the value.

edited Oct 27 '15 at 07:49

answered Oct 26 '15 at 23:03

Nina Scholz

323,592
20
270
324

`innerText` does not work in Firefox, use `innerHTML` or `textContent` (the latter not supp. by IE < 9) if you want to be w3c-DOM compliant. – deamentiaemundi Oct 26 '15 at 23:24
@deamentiaemundi, i have changed that. :) – Nina Scholz Oct 27 '15 at 07:57
Than let me be a dutiful member of this community and give you a thumbs-up, no wait, wrong group, ah it's a +1, sorry. – deamentiaemundi Oct 27 '15 at 17:59

unpollito · Answer 2 · 2015-10-26T23:10:38.350

Nina's answer is good, but you don't really need a form for that. How about this instead of your form?

<button onclick="randomNumber()">Click me!</button>

Then the randomNumber function would go as Nina suggested:

function randomNumber() {
    document.getElementById('number').innerText = Math.floor(Math.random() * 10);
}

Since there is no form, there's no need to prevent the form from actually being sent.

Incidentally, this would put the random number in the p with id "number", which I guess is what you wanted. However, if you want to leave a page which contains just the number, use document.write instead of document.getElementById..., as in your original snippet.

Generating a random number in JavaScript

2 Answers2