I'm currently facing an issue with my progress bar, or as I like to call it, a depletion bar. The purpose of this bar is simple - whenever it's clicked, the button resets itself. However, if the bar reaches 100%, the player loses. The strange problem I encountered was that instead of functioning properly, the bar started replicating itself and rendering multiple progress bars simultaneously.
Below is the code snippet:
function move() {
var elem = document.getElementById("DPbar");
var width = 0; /* Starting percentage */
var id = setInterval(frame, 100); /* Speed of depletion bar */
function frame() {
if (width >= 13) { /* Length of depletion bar (ending percentage) */
clearInterval(id);
alert("You Lose, reload (Ctrl + R) the page to play again!"); /* Message displays after hitting 100% (or whatever is the final percentage) */
} else {
width++;
elem.style.width = width + '%'; /* Speed of depletion bar also (idk?) */
elem.innerHTML = width * 7.69230769230 + '%'; /* Multiplier of percentage */
}
}
}html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #9898ff;
opacity: 0.8;
background-image: linear-gradient(to right, #4349c2, #4349c2 25px, #5e5eff 25px, #5e5eff);
background-size: 50px 100%;
}
.PringleButton {
background-color: #FFEA00;
/* Pringle Color */
border: 5px solid black;
color: black;
/* Text Color */
padding: 86px 52px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
border-radius: 100%;
cursor: copy;
}
.PringleButton:hover {
background-color: rgba(236, 236, 57, 0.667)
}
.PringleButton:active {
background-color: rgba(236, 236, 57, 0.667);
transform: scale(0.9, 0.9);
}
.DPbar {
position: absolute;
bottom: 200px;
left: 725px;
border: 2px solid black;
background-color: seagreen;
border-radius: 25%;
cursor: not-allowed;
}<!--button and depletion bar functionality-->
<!--TO DO: 1: Make DP bar length shorter + center it (DONE)
2: DP bar total percentage = 100% (DONE...kinda...)
3: Tweak depletion speed (DONE)
4: DP bar does not push pringle button (DONE)
5: Clicking multiple times does not clone the DP bar-->
<div id="DPbar" class="DPbar" style="width:0%">0%</div>
<!-- Starting percentage of depletion bar-->
<br>
<button class="PringleButton" onclick="move()">Pringle!</button>