我如何获得每个滑块的价值； javascript 只显示一个

Question

我很难尝试完成这项工作，如果有人知道解决方案，我将不胜感激。！仍在学习 java-script 并最终学习加载函数，但现在我在尝试显示两个值时遇到问题。如果我改变任何东西，我会让第二个滑块工作，但第一个滑块停止工作。

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

Answer 2

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

此外，没有 name HTML 元素，然后您得到了带有结束 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>

我如何获得每个滑块的价值； javascript 只显示一个

how can i get value for each slider; javascript only showing one

html

javascript

slider