I need help with a simple dice game coded in HTML, CSS, and JS.
Currently, whenever I reload the page or click the shuffle button, the entire page refreshes causing the dice images to change. However, I want only one specific div ("context div") to refresh, as it contains an animated background that starts from the beginning each time. I don't want the background to reset every time the page reloads, so I'm looking for a solution that will only refresh the dice images inside the div. Can anyone assist me with this?
Here is the code snippet:
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomDiceImage = "dice" + randomNumber1 + ".png";
var randomImageSource = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/" + randomDiceImage;
var image1 = document.querySelectorAll("img")[0];
image1.setAttribute("src", randomImageSource);
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
var randomImageSource2 = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/dice" + randomNumber2 + ".png";
document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);
if (randomNumber1 > randomNumber2) {
document.querySelector("h1").innerHTML = "Player 1 Wins!";
} else if (randomNumber2 > randomNumber1) {
document.querySelector("h1").innerHTML = "Player 2 Wins!";
} else {
document.querySelector("h1").innerHTML = "Draw!";
}.container {
width: 70%;
margin: auto;
text-align: center;
}
...
<!DOCTYPE html>
...
</html>If you have any suggestions on how to reload only a specific div (changing only the dice images) without refreshing the entire page, please let me know. Thanks In Advance.😊