Progress bar replicates itself?-CodePudding

I have this progress bar, more of a depletion bar actually, and its job is whenever it is clicked the button resets itself, if it reaches 100% then the player loses, for whatever reason the bar decides to replicate itself and starts rendering multiple progress bars at the same time instead.

here's the code:

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"  style="width:0%">0%</div>
<!-- Starting percentage of depletion bar-->
<br>
<button  onclick="move()">Pringle!</button>

CodePudding user response：

Moved your code around a bit. Important part is to clear the interval if it already exists when clicking the button. See the --> Comments

<!DOCTYPE html>
<!--Pringle Clicker 1.0-->
<!--The DP (Depletion Bar) code was origionally from w3schools.com, however it has been heavily modified-->
<html>
<head>
    <title>Pringle Clicker v1.0</title>

    <style> 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;
    }

    </style>
</head>
<body>
<!--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"  style="width:0%">0%</div> <!-- Starting percentage of depletion bar-->
<br>
<button  onclick="move()">Pringle!</button>


<script>
    var id = undefined; // --> MOVED ID OUTSIDE
    function move() {
        var elem = document.getElementById("DPbar");
        var width = 0; /* Starting percentage */
        if (id) { // --> CLEAR ID IF EXISTS
            clearInterval(id);
        }
        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 */
            }
        }
        id = setInterval(frame, 100); /* Speed of depletion bar */ 
    }
</script>



</body>

</html>