Progress Bar Based on % Towards Goal

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!

You need to sign in to view this answers