progressbar html tag change-CodePudding

I'am working on progressbar that change the level when reaching some point. The code. I want to change the text under the progressbar when the progressbar reach 100 or above 90. I could change it once but I want to go to next level, like this. silver ==> gold ==> diamond ==> and more

const step = 5;
var content=document.getElementById('mylevel').innerHTML;

const updateProgress = () => {
  const currentWidth = Number(document.getElementById("progressvalue").style.width.replace( "%", ""));
  
  if (currentWidth>=100) {
    return;
  }
  else {
    document.getElementById("progressvalue").style.width = `${currentWidth step}%`;
  }

    if (currentWidth > 90) {
    
      document.getElementById("mylevel").textContent = "gold";
      document.getElementById("progressvalue").style.width = "0%";
    }
      if (currentWidth > 90 && content == "gold") {
    
      document.getElementById("mylevel").textContent = "diamond";
      document.getElementById("progressvalue").style.width = "0%";
    }
}

const restart = () => {
  document.getElementById("progressvalue").style.width = "0%";
}

.progress {
  background-color: #ededed;
  width: 100%;
  overflow: hidden;
}
#progressvalue {
  height: 40px;
  background-color: lightgreen;  
  width: 0%;
}

<div >
  <div id="progressvalue"></div>
  
</div>
<p id="mylevel">silver</p>
<br />
  
<button type="button" onclick="updateProgress()">
  Update Progress
</button>
  
<button type="button" onclick="restart()">
  Restart
</button>

When the updateprogress is above 90 the silver change to gold, but I need to change again to diamond when the updateprogress is again above 90. Am I putting the if condition in a wrong place, I tried many times. I don't know what I'am missing and am new with JavaScript

I started the code but got help here to make it much better (80% of the code done by
teresaPap thanks)

CodePudding user response：

Update

After closer inspection it is an issue of content not updating you need to put it inside updateProgress() or it will forever remain the initial value.

const step = 5;
const updateProgress = () => {
    var content = document.getElementById('mylevel').innerHTML;

    //the rest of the code

I do however recommend you to improve your if statements. You only need one if for this task.

A better solution

A better solution would be something like this: Add a hidden value to keep your level progress

</div>
<p id="hiddenlevel">0</p>
<p id="mylevel">silver</p>
<br />

and css:

#hiddenlevel {
  height: 0px;
  visibility: hidden;
  width: 0%;
}

now that you have a hidden value you can wrap up all future ifs in a single one like so:

const levels = ["silver", "gold", "diamond"]
var mylevel = Number(document.getElementById("hiddenlevel").innerHTML);

if(currentWidth > 90 && mylevel < levels.length){
    document.getElementById("hiddenlevel").textContent = mylevel   1;
    document.getElementById("mylevel").textContent = levels[mylevel   1];
    document.getElementById("progressvalue").style.width = "0%";
}

and just like that you can just add a new level inside the levels array and it will be added without issues.

const step = 5;
const updateProgress = () => {
  const currentWidth = Number(document.getElementById("progressvalue").style.width.replace( "%", ""));
  
  if (currentWidth>=100) {
    return;
  }
  else {
    document.getElementById("progressvalue").style.width = `${currentWidth step}%`;
  }

    const levels = ["silver", "gold", "diamond"]
    var mylevel = Number(document.getElementById("hiddenlevel").innerHTML);

    if(currentWidth > 90 && mylevel < levels.length){
        document.getElementById("hiddenlevel").textContent = mylevel   1;
        document.getElementById("mylevel").textContent = levels[mylevel   1];
        document.getElementById("progressvalue").style.width = "0%";
    }
}

const restart = () => {
  document.getElementById("progressvalue").style.width = "0%";
}

.progress {
  background-color: #ededed;
  width: 100%;
  overflow: hidden;
}
#progressvalue {
  height: 40px;
  background-color: lightgreen;  
  width: 0%;
}
#hiddenlevel {
  height: 0px;
  visibility: hidden;
  width: 0%;
}

<div >
  <div id="progressvalue"></div>
  
</div>
  <p id="hiddenlevel">0</p>
  <p id="mylevel">silver</p>
<br />
  
<button type="button" onclick="updateProgress()">
  Update Progress
</button>
  
<button type="button" onclick="restart()">
  Restart
</button>