如何获取每个滑块的值;javascript只显示一个

Question

我很难做到这一点，如果有人知道一个非常感谢的解决方案，我希望得到一些帮助。！'我仍在学习java脚本，并最终学习了加载函数，但现在我在尝试显示这两个值时遇到了问题。如果我改变任何东西，我会让第二个滑块工作，但第一个滑块停止工作。

HTML代码：

<input type="range" min="1" max="100" value="1" class="slider" id="myRange">
<p id="value-box">Value: <span id="demo" style="color:#ae81ff;"></span><name id="Seconds"> Seconds</id></p>
<input type="range" min="1" max="200" value="1" class="slider" id="W-range">
<p id="value-box">Value: <span  Name="W-range" id="demo2" style="color:#ae81ff;"></span><name id="Seconds"> Seconds</id></p>

Javascript代码：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
window.onload = ()=>{
var slider = document.getElementById("W-range");
var output = document.getElementById("demo2");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}
}

Answer 1

首先将slider变量设置为myRange滑块，然后重新定义slider并将其指向W-range滑块。您应该有两个独立的变量。此外，如果您只是将script放置在关闭的body标记之前，则根本不需要window.onload。

此外，没有nameHTML元素，然后您得到了带有结束id标记的元素，该标记也不存在。这些应该只是span元素。而且，不能有两个具有相同id的元素，这是使用id="Seconds"所做的。事实上，您应该首先尝试避免使用id，因为它们会使您的代码更加脆弱和难以扩展。这些元素在这里根本不需要唯一的名称。

此外，由于两个滑块都做相同的事情，所以只需要编写一次回调代码。请参阅下面的评论：

<input type="range" min="1" max="100" value="1" class="slider" id="myRange">
<p id="value-box">Value: 
<span style="color:#ae81ff;"></span>
<span> Seconds</span>
</p>
<input type="range" min="1" max="200" value="1" class="slider" id="W-range">
<p id="value-box">Value: 
<span style="color:#ae81ff;"></span>
<span> Seconds</span>
</p>
<script>
// If you place a `script` element just before the closing body tag
// there is no need for window.onload because by the time the parser
// reaches this point, all the HTML will have been loaded into memory

// Don't use event properties, use addEventListener()
document.getElementById("myRange").addEventListener("input", report);
document.getElementById("W-range").addEventListener("input", report);  

// Both sliders essentially need to do the same thing, but their values
// need to go in different places. `this` will represent the slider
// that got the input and then we can get the paragraph sibling that
// comes after it and query its contents for the span that should display
// the value.
function report(event){
this.nextElementSibling.querySelector("span").textContent = this.value;  
}
</script>

Answer 2

在slider.oninput=function((之后只有一个关闭"}"过多

您应该查看HTML中的标签：<name id="Seconds"> Seconds</id></p>
标签名称不存在，您正在关闭(但未打开(的标签id也不存在

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
window.onload = ()=>{
var slider = document.getElementById("W-range");
var output = document.getElementById("demo2");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}

<input type="range" min="1" max="100" value="1" class="slider" id="myRange">
<p id="value-box">Value: <span id="demo" style="color:#ae81ff;"></span><name id="Seconds"> Seconds</id></p>
<input type="range" min="1" max="200" value="1" class="slider" id="W-range">
<p id="value-box">Value: <span  Name="W-range" id="demo2" style="color:#ae81ff;"></span><name id="Seconds"> Seconds</id></p>