html 中嵌入了多个 Javascript 函数

Question

我正在尝试在 HTML 中实现两个滑块并使用 Javascript 函数来更新这些滑块值的指示器。我不知道如何为每个滑块的输出构建代码。我认为 Javascript 代码的嵌入方式存在问题。有谁知道我该如何解决这个问题？

目的：在 HTML

中有两个带有两个独立指示器的滑块

谢谢！

<body>

<h1>Round Range Slider</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange1">
  <p>Value1: <span id="demo1"></span></p>
</div>


</body>

<head>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

<script>
var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>




</head>

Answer 1

在单独的 script 标记中声明变量不会创建变量的两个副本。您可以为每个滑块声明一个变量，方法是给它们不同的名称。

<body>
    <h1>Round Range Slider</h1>
    <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" 
               class="slider" id="myRange">
        <p>Value: <span id="demo"></span></p>
    </div>

    <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" 
               class="slider" id="myRange1">
        <p>Value1: <span id="demo1"></span></p>
    </div>
</body>
<head>
<script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

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

    var slider1 = document.getElementById("myRange1");
    var output1 = document.getElementById("demo1");
    output1.innerHTML = slider1.value;

    slider1.oninput = function() {
        output1.innerHTML = this.value;
    }
</script>
</head>

更好的是，使用循环：

<body>
    <h1>Round Range Slider</h1>
    <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" 
               class="slider" id="myRange">
        <p>Value: <span id="demo"></span></p>
    </div>

    <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" 
               class="slider" id="myRange1">
        <p>Value1: <span id="demo1"></span></p>
    </div>
</body>
<head>
<script>
    let sliders = document.querySelectorAll(".slidecontainer");
    sliders.forEach(slideContainer => {
        // Get a reference to the children of the current container.
        let sliderChild = slideContainer.children[0];
        let spanChild = slideContainer.children[1].children[0];

        // Attach an event listener to each slider.
        sliderChild.oninput = () => spanChild.innerText = sliderChild.value;

        // Initialize the label.
        spanChild.innerText = sliderChild.value;
    });
</script>
</head>

Answer 2

复制代码，考虑到引入小的变化 - 是不好的。

我用forEach()方法给你做了一个js代码。这意味着现在你可以控制很多input，而不必为每一个都写js逻辑。

只需将您的 js 代码替换为以下代码即可：

let input = document.querySelectorAll('.slidecontainer input');
let result = document.querySelectorAll('.slidecontainer span');

input.forEach(function(input_current, index) {
  input_current.oninput = function() {
    result[index].innerHTML = this.value;
  }
});

html 中嵌入了多个 Javascript 函数

Multiple Javascript functions embedded in html

html

javascript

label

slider