How do I output a new random number to an HTML doc(via innerText) in JavaScript?

Question

I am doing a simple math game in HTML and JavaScript for school, this is just a small part of it. Basically I have a button that I want to be able to press, and each time I press it I want it to output a new number to the innerText of a div in the HTML document.

Right now I get the random number, but I have to refresh the page to get a new one since it keeps outputting the same one if I press it again.

const mathQuestion = document.getElementById('math-question')
const newNumbers = document.getElementById('new-btn')

newNumbers.addEventListener('click', setQuestion)

function setQuestion () {

    mathQuestion.innerText = calc.toString();
    console.log(calc);
}

var calc = Math.floor(Math.random() * 100) + 1;

Yes, it's very simple and probably not the easiest or even the correct way to do it, but I am at a loss here.

I suspect I need to run another function for reseting the text or something after ive set the innerText, but I don't really know where to start.

Answer 1

Currently, you only generate the random number once and when you click the button, you set the same number in the HTML. That is why you see the same number irrespective of how many times you click the button.

Number changes on page reload because each time page reloads, new random number is generated.

You need to re-generate the random number every time the button is clicked. To do this, move the random number generation code inside the event handler function and it should work as expected.

function setQuestion () {
    var calc = Math.floor(Math.random() * 100) + 1;
    mathQuestion.innerText = calc;
}

Also, there's no need to explicitly convert the number into a string.