(apologies for any language mistakes)
I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamically by adding an onclick function to the divs. This function is supposed to replace the old background image with the new one.
I've experimented with different approaches:
Initially, I tried resetting the URL in the onclick function like this:
chal = document.getElementById('chal' + x + n);
chal.style.backgroundImage = "url('../../../images/backgrounds/challenge_unknown_gold.png')";
Although I expected it to update the background image, the old image persisted.
Next, I removed the initial background to test if changing the order works, and indeed it did. When no background was set previously, the new image displayed correctly.
Realizing that the new background image would load, I attempted setting the initial background via JavaScript and removing it through CSS:
document.getElementsByClassName("")[0].style.backgroundImage = "url(''); This approach also worked, but clicking on the div didn't trigger any action.
Then I attempted clearing the initial background before setting the new one:
chal.style.backgroundImage = "";
chal.style.removeProperty("background-image");
chal.style.background = "none";
Despite these efforts, the issue remained unsolved, and now I could see the edges of the new background image beneath the old one.
I'm unsure how to resolve this without complicating the code unnecessarily. One solution might involve duplicating each div to include the new background and using display: none. However, I am hopeful that someone can suggest a smarter alternative.
Thank you!
Here is the provided Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
[...]
<link rel="stylesheet" href="snake_style.css">
</head>
<body>
<main>
<div>
<div id="chalA1" class="challenges bronze" onclick="giveXP('A', 1)"></div>
<div id="chalA2" class="challenges bronze" onclick="giveXP('A', 2)"></div>
[...]
<div id="chalB1" class="challenges bronze" onclick="giveXP('B', 1)"></div>
<div id="chalB2" class="challenges bronze" onclick="giveXP('B', 2)"></div>
[...]
</div>
<script type="text/javascript" src="snake_script.js"></script>
</main>
</body>
CSS:
.challenges {
background-repeat:no-repeat;
background-position: center center;
background-size: contain;
display:flex;
justify-content: center;
align-content: center;
margin: 0.25rem;
padding:0;
border: none;
}
.bronze{
background-image: url(../../../images/backgrounds/challenge_unknown_bronze.png);
}
.silver {
background-image: url(../../../images/backgrounds/challenge_unknown_silver.png);
}
.gold {
background-image: url(../../../images/backgrounds/challenge_unknown_gold.png);
}
Javascript:
let chal;
function giveXP(x, n) {
[...]
chal = document.getElementById('chal' + x + n);
chal.style.backgroundImage = "";
chal.style.backgroundImage = "url('../../../images/backgrounds/challenge_unknown_gold.png')";
[...]
}