I’m trying to make a progress bar that updates and shows how close the player is to being able to purchase an upgrade.
Apologizes if this is not formatted properly! First post.
Here’s what I have so far:
HTML:
<!-- Progress Bar -->
<div id="Progress">
<div id="progressBar">1%</div>
</div>
CSS:
/* Progress Bar */
#Progress {
width: 100%;
background-color: black;
}
#progressBar {
width: 1%;
height: 40px;
background-color: purple;
text-align: center;
line-height: 40px;
color: white;
}
What would I put for my JavaScript? I’ve tried along these lines:
document.getElementById("progressBar").style.width = (gameData.gems / gameData.prestigeMultiCost)
I’m aware that’s wrong and a mash up of a few concepts but I’m stumped on how to make this work.
Thanks!
EDIT: Here’s my latest batch of code. The goal is to make the background color go from white to a deep gold as you collect more diamonds, up to 1,000.
window.setInterval(function () {
document.body.style.backgroundColor = " rgb (255, " + (255 - (gameData.diamonds * 0.039)) + ", " + (255 - (gameData.diamonds * 0.255)) + ")"
}, 10)
EDIT 2: I just had an extra space… I did it though!