CODEWITHSUNDEEP
javascripthtmlcss
ThomasBrushel
ThomasBrushel

Reputation: 107

Changing the value of a string of text

I have a progress bar that I built and right now I'm just appending a progress value to the <h1> tag. What I would like to achieve is to replace the old value with the new one. I am not sure if there is a reserved word that I could use to update the value or something similar. Any help or push in the right direction would be greatly appreciated.

Thanks!

This is what I have so far: 

const button = document.getElementById("btn");
const bar = document.getElementById("progress-bar");
const heading = document.getElementById("visual-progress");

button.addEventListener('click', function(){
  if(bar.value >= 100) {
    bar.value=100;
  } else {
    bar.value+=25;
  }
  document.getElementById("visual-progress").append(bar.value);
});
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 3em;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 20px;
  -webkit-transition: all 5s;
  transition: all 5s;
}

progress::-webkit-progress-bar {
  background-color: #ccc;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: orange !important;
}

button {
  margin-top: 2em;
  background: black;
  color: white;
  border: none;
  padding: .5em 2em;
}
button:hover {
  background: #1a1a1a;
}

.hide {
  display: none;
}
<body>
  <h2 id='visual-progress'>Quiz Progress</h2>
  <progress id='progress-bar' max='100' value='0'></progress>
  <button id='btn'>Next</button>
</body>

Upvotes: 1

Views: 85

Answers (5)

Rick
Rick

Reputation: 1209

Change .append(bar.value); to .innerHTML = bar.value;.

const button = document.getElementById("btn");
const bar = document.getElementById("progress-bar");
const heading = document.getElementById("visual-progress");

button.addEventListener('click', function(){
  if(bar.value >= 100) {
    bar.value=100;
  } else {
    bar.value+=25;
  }
  document.getElementById("progress").innerHTML = bar.value;
});
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 3em;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 20px;
  -webkit-transition: all 5s;
  transition: all 5s;
}

progress::-webkit-progress-bar {
  background-color: #ccc;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: orange !important;
}

button {
  margin-top: 2em;
  background: black;
  color: white;
  border: none;
  padding: .5em 2em;
}
button:hover {
  background: #1a1a1a;
}

.hide {
  display: none;
}
<body>
  <h2 id='visual-progress'>Quiz Progress <span id="progress">0</span>%</h2>
  <progress id='progress-bar' max='100' value='0'></progress>
  <button id='btn'>Next</button>
</body>

Upvotes: 1

Pratheesh M
Pratheesh M

Reputation: 1078

use .innerHTML instead of .append().like document.getElementById("visual-progress").innerHTML = bar.value + "%";

Upvotes: 1

dhilt
dhilt

Reputation: 20744

Use a local variable to store the initial value and .innerHTML to access/override the text:

let initialValue = document.getElementById("visual-progress").innerHTML;

button.addEventListener('click', function(){
  if(bar.value >= 100) {
    bar.value=100;
  } else {
    bar.value+=25;
  }
  var newValue = initialValue + ' ' + bar.value; 
  document.getElementById("visual-progress").innerHTML = newValue;
});

Upvotes: 2

JakeofSpades
JakeofSpades

Reputation: 1012

I would clear the current text and replace it with desired text. Could look something like this:

var thisInfo = document.getElementById("visual-progress").innerHtml.Remove();
thisInfo = bar.value;

Or maybe better to just assign the innerHtml of your div to the new value without needing the remove function. Should work the same.

var thisInfo = document.getElementById("visual-progress").innerHtml = bar.value;

Hope it helps

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use .innerHTML instead of .append()

const button = document.getElementById("btn");
const bar = document.getElementById("progress-bar");
const heading = document.getElementById("visual-progress");

button.addEventListener('click', function(){
  if(bar.value >= 100) {
    bar.value=100;
  } else {
    bar.value+=25;
  }
  document.getElementById("visual-progress").innerHTML = bar.value + "%";
});
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 3em;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 20px;
  -webkit-transition: all 5s;
  transition: all 5s;
}

progress::-webkit-progress-bar {
  background-color: #ccc;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: orange !important;
}

button {
  margin-top: 2em;
  background: black;
  color: white;
  border: none;
  padding: .5em 2em;
}
button:hover {
  background: #1a1a1a;
}

.hide {
  display: none;
}
<body>
  <h2 id='visual-progress'>Quiz Progress</h2>
  <progress id='progress-bar' max='100' value='0'></progress>
  <button id='btn'>Next</button>
</body>

Upvotes: 1

Related Questions