Multiple Javascript functions embedded in html
Question
I am trying to implement two sliders in HTML and use Javascript functions to update the indicator of the values of those sliders. I don't know how to structure the code for the output of each slider. I think there is a problem with the way that the Javascript codes are embedded. Does anyone know how I can solve this issue?
Purpose: Have two sliders with two separate indicators in HTML
Thanks!
<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>
2 answers
solution1
1 ACCPTED 2021-01-12 22:09:19
Duplicating the code, taking into account the introduction of small changes - is bad.
I made you a js code with the forEach() method. This means that now you can control many input without having to write js logic for every.
Just replace your js code with this one:
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;
}
});
solution2
0 2021-01-12 21:53:04
Declaring variables in separate script tags does not create two copies of the variable. You can declare a variable for each slider by giving them different names.
<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>
Better yet, use a loop:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.