How to make the button clickable more than one time

Question

I don't really know how to name this problem.

I made a simple code where clicking a button results in displaying a random number on screen. But I've run into an issue that every time you display the number then the button "locks" itself and you need to reload the page to click it again. My problem is I don't want to reload everytime I click the button.

<div class="box" id="box">
        <p id="p1">Generate a number</p>
        <p id="p2">  <script src="main.js"></script></p>
        <div class="container">
        <button id="genbutton" class="button"  onclick="generator()">Generate</button>
        </div>
    </div>

function generator() {
    document.getElementById("p2").innerHTML = x;
    document.write.innerHTML(x);

  }

codepen demo

Answer 1

This is because you're only generating x (the random number) once. In your codepen example, move the generation of x into the event handler:

function generator() {
    var x = Math.floor(Math.random() * 1001);
    document.getElementById("p2").innerHTML = x;
}