Javascript random integer button

Question

I am attempting to make a button that when clicked outputs an integer from 1-11. I have tested the "getRandomInt" function and it works, however when I try to add the button aspect nothing comes up when I click the button. Also the console does not log any errors. code:

<form>
<input type="button" onclick="getRandomInt()" value="Click Here">
<br>
</form>
<script type="text/javascript">

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
document.write(getRandomInt(1, 12));

</script>

Can someone explain it in layman's terms how to fix this because the function should be correct, I think the button is wrong somehow and I think the two aren't being connected properly.

Also, there is no visible output of just calling the function. You'd need to console.log or alert the result or something. — Thilo, Jun 06 '16 at 01:04
Pretty similar issue with solution: http://stackoverflow.com/questions/11752100/trying-to-get-a-random-number-on-button-click — le_m, Jun 06 '16 at 01:56

J Delaney · Accepted Answer · 2016-06-06T01:07:46.653

2

You need to supply arguments to getRandomInt when you call it. You also need to wrap the function call in something like document.write so you can see the output

<form>
    <input type="button" onclick="document.write(getRandomInt(1, 10))" value="Click Here">
    <br>
</form>
<script type="text/javascript">

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
};
document.write(getRandomInt(1, 12));

</script>

edited Jun 06 '16 at 01:07

answered Jun 06 '16 at 01:03

J Delaney

589
4
17

I tried that before posting here and it didn't work. – user6428243 Jun 06 '16 at 01:06
@user6428243 I updated my answer to include wrapping getRandomInt in a document.write call. Try that – J Delaney Jun 06 '16 at 01:08
@melpomene You're right. I updated my answer to include wrapping getRandomInt in a document.write call – J Delaney Jun 06 '16 at 01:10
@user6428243 don't hesitate to accept an answer that works for you by clicking the green checkmark – Jeff Puckett Jun 06 '16 at 02:05

score 0 · Answer 2 · edited May 23 '17 at 11:53

You are missing the glue between your program logic (getRandomInt()) and the presentation (document.write()), i. e. later statement is not part of your button's event handler.

I'd like to propose the following solution which avoids calling document.write and instead sets the text property of a dedicated <span id='display-random'>:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

var button = document.getElementById('button-random'),
    display = document.getElementById('display-random');

button.addEventListener('click', function(event) {
  display.textContent = getRandomInt(1, 12);
});

<form>
  <input type="button" id="button-random" value="Click Here">
</form>
<span id="display-random"></span>

Javascript random integer button

2 Answers2