更改文本字符串的值

我有一个我创建的进度条，现在我只是将进度值附加到<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>

来源

2017-10-19 ThomasBrushel

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

<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>

来源

2017-10-19 14:27:55

可以使用.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; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

来源

2017-10-19 14:28:01 guest271314

使用局部变量来存储初始值和.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; 
});

来源

2017-10-19 14:29:03 dhilt

有没有涉及到他的问题的一些原因，使得你建议更换“视觉进步”文本（和使用额外的变量，似乎没有理由），而不是取代“进度栏”文本？ –

他肯定希望改变“视觉进步”文本。这就是我理解这些要求的方式，看起来我是对的。这也跟他的片段一样... – dhilt

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

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

或者可能更好的是只分配div的innerHtml到新的值，而不需要删除功能。应该工作一样。

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

希望它可以帮助的

来源

2017-10-19 14:31:49 JakeofSpades

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

来源

2017-10-19 14:40:56

更改文本字符串的值

回答

相关问题