在页面上重新运行 javascript 而无需刷新/重新加载整个页面

Question

I am using JavaScript to generate some random numbers. those random numbers are then checked against user input and correct/incorrect result is displayed. Then I have a button in place which refreshes the page to generate new random values.

I was wondering it there a better method that would re-run the JavaScript without having to reload the entire page again.

//Generates a pair of very peculiar two digit random numbers
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() \* (max - min + 1)) + min;
}
let a = getRandomInt(2,9);
let b = getRandomInt(0,8);
let d = getRandomInt(1,a-1);  
let e = getRandomInt(b+1,9);
let ab ="" + a + b;
document.getElementById("AB").innerHTML = ab;
let de ="" + d + e;
document.getElementById("DE").innerHTML = de;

// finds their difference
let result = ab-de;
document.getElementById("R").innerHTML = result;

//checks the user input against correct result and displays a correct/incorrect message
function myFunction() {
    let x = document.getElementById("numb").value;
    let text;
    if (x == result) {
        text = "Correct";
    } else {
        text = "incorrect";
    }
    document.getElementById("demo").innerHTML = text;
}

Now I want new values to appear on a press of a button. One way to do is to simply refresh the page which I'm currently doing. I was wondering is there a better way to do this. I tried enveloping the entire script in a function and call it using a button. It works but it breaks the result checking functionality for some reason.

PS: I don't have any experience in HTML/JS apart from what I got while building this little side project. Any help is highly appreciated.

Answer 1

You're close with the idea of putting everything in another function, but not quite there. Instead of rerunning everything, another function to just generate new numbers and update the UI should do the trick.

// Generates a pair of very peculiar two digit random numbers
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Generate a new set of numbers
function getNewIntsToCheck() {
    const a = getRandomInt(2,9);
    const b = getRandomInt(0,8);
    const d = getRandomInt(1,a-1);  
    const e = getRandomInt(b+1,9);
    const ab ="" + a + b;
    const de ="" + d + e;
    const result = ab-de;

    return { ab, de, result }
}

// Set in parent scope for access in myFunction
// There are other ways to do this, but this should be easy to understand since
// you don't have much experience with JS :)
let res = ""

// Update the UI on the click of the refresh button
function onRefreshButtonClick() {
    const { ab, de, result } = getNewIntsToCheck()
    // Set res from parent scope
    res = result
    document.getElementById("R").innerHTML = result;
    document.getElementById("AB").innerHTML = ab;
    document.getElementById("DE").innerHTML = de;
}

// Check current numbers in UI against user input and display message
function myFunction() {
    let x = document.getElementById("numb").value;
    let text;
    // Check against res from parent scope, which was set in
    // onRefreshButtonClick
    if (x == res) {
        text = "Correct";
    } else {
        text = "incorrect";
    }
    document.getElementById("demo").innerHTML = text;
}