Question

我有一个我建立的进度条，现在我只是将一个进度值附加到<h1>标记。我想要实现的是用新值替换旧值。我不确定是否有可用于更新值或类似内容的保留字。任何帮助或推动正确的方向将不胜感激。

谢谢！

这是我到目前为止所做的：

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>

Answer 1

使用局部变量存储初始值，使用.innerHTML来访问/覆盖文本：

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

Answer 2

将ResumeAfterCallback更改为.append(bar.value);。

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

Answer 3

您可以使用<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>代替.innerHTML

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

Answer 4

我会清除当前文本并将其替换为所需文本。看起来像这样：

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

或者更好的方法是将div的innerHtml分配给新值而不需要remove函数。应该是一样的。

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

希望有所帮助

Answer 5

使用.innerHTML代替.append() document.getElementById("visual-progress").innerHTML = bar.value + "%";

更改文本字符串的值

5 个答案: