html內嵌多個Javascript函數

Question

我正在嘗試在 HTML 中實現兩個滑塊，並使用 Javascript 函數來更新這些滑塊值的指示器。 我不知道如何構造每個 slider 的 output 的代碼。我認為嵌入 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

復制代碼，考慮到引入小的變化 - 是不好的。

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

Answer 2

在單獨的script標簽中聲明變量不會創建變量的兩個副本。 您可以通過給每個 slider 不同的名稱來聲明一個變量。

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

html內嵌多個Javascript函數

問題描述

2 個解決方案

解決方案1
1 已采納 2021-01-12 22:09:19

解決方案2
0 2021-01-12 21:53:04

html內嵌多個Javascript函數

問題描述

2 個解決方案

解決方案1 1 已采納 2021-01-12 22:09:19

解決方案2 0 2021-01-12 21:53:04

解決方案1
1 已采納 2021-01-12 22:09:19

解決方案2
0 2021-01-12 21:53:04