Click event running once

Question

I have two dice. When I click on the button, the dice are randomized. But, when I click again on the button, the function no longer runs. What can I do to run the function each time I click the button ?

let arr = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ];

let dice1 = document.querySelector(".dice1"); 
let dice2 = document.querySelector(".dice2"); 

let rand = arr[Math.floor(Math.random() * arr.length)]
let rand2 = arr[Math.floor(Math.random() * arr.length)]

let button = document.querySelector("button"); 


function game () {

let title = document.querySelector("h1"); 
dice1.src = "/images/" + rand
dice2.src = "/images/" + rand2

if (rand > rand2) {
    title.textContent = "Player 1 WIN"
}
else if (rand2 > rand) {
    title.textContent = "Player 2 WIN"
}
else if (rand2 === rand) {
    title.textContent = "EQUALS"
}
else{
    return
}

}


button.addEventListener ("click", () => {
    game(); 
})

Answer 1

If you move your rand and rand2 variable definitions inside of game() it should work. You're currently only generating the random #s when the script initially loads (not on button click), and then they're being used on button click each time, but the #s aren't being regenerated so it appears like it's not working.

Additionally, you can call game() on page load if you want it to run the first time without a button click.

Note: I made up some example HTML because it wasn't included in your question, but this should give you an idea of how to do it.

let arr = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ];

let dice1 = document.querySelector(".dice1"); 
let dice2 = document.querySelector(".dice2"); 

let button = document.querySelector("button");
let title = document.querySelector("h1"); 

function game () {
    // regenerate these each time this function is run
    let rand = arr[Math.floor(Math.random() * arr.length)]
    let rand2 = arr[Math.floor(Math.random() * arr.length)]

    dice1.src = "/images/" + rand
    dice2.src = "/images/" + rand2

    if (rand > rand2) {
        title.textContent = "Player 1 WIN"
    }
    else if (rand2 > rand) {
        title.textContent = "Player 2 WIN"
    }
    else if (rand2 === rand) {
        title.textContent = "EQUALS"
    }
    else{
        return
    }
}


button.addEventListener ("click", () => {
    game(); 
})

game(); // run it on page load if desired

<h1>title</h1>

<img class="dice1" />
<img class="dice2" />

<button>Roll</button>

Answer 2

Because you initial this block only once.

let arr = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ];

let dice1 = document.querySelector(".dice1"); 
let dice2 = document.querySelector(".dice2"); 

let rand = arr[Math.floor(Math.random() * arr.length)]
let rand2 = arr[Math.floor(Math.random() * arr.length)]

let button = document.querySelector("button"); 

But you need the values rand, rand2 on every click. Put this two vars into your code function.