Pardon as I am a newbie coder. I have a slider that outputs a value as I drag it and display it with a span tag
<div class="slidecontainer"> <input type="range" min="0" max="10" value="5" class="slider1" id="myRange1"> </div> <h4>Score: <span id="demo1"></span></h4> <div class="login-box"> <form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form"> <div class="user-box"> <input type="text" placeholder="Enter name of panel" name="data[Panel]" required> </div> <div> <input type="text" id="txtInput1"> </div> <ul class="actions"> <li><button type="submit">Submit Score</button></li> </ul> </form> </div>
which is linked to javascript code
var slider1 = document.getElementById("myRange1"); var output1 = document.getElementById("demo1"); var input1 = document.getElementById("txtInput1"); output1.innerText = slider1.value; // Display the default slider value input1.value = slider1.value; // Update the current slider value (each time you drag the slider handle) slider1.addEventListener("input1", function() { const slider1Value = this.value; output1.innerText = input1Value; input.value = slider1Value; }); slider1.oninput = function() { output1.innerHTML = this.value; }
because I want to pass the output of the slider value to a form tag because I want to submit the value to a googlesheet using API
everything is working, however, whenever I drag the slider the value displayed on the form placeholder is not updating. I want to sync them and update in real-time. Is this possible? Am I missing anything obvious?
Please save me. Thanks
There was couple of mistakes, mostly in the naming of the variables, but the most important one is was inside your eventListener
.
As you can see , the first element inside ()
should be the type of the event
, not the name of the variable. So I've put change
( see more info here ), instead of input1
.
Other changes are mostly typing errors, as I've said.
var slider1 = document.getElementById("myRange1"); var output1 = document.getElementById("demo1"); var input1 = document.getElementById("txtInput1"); output1.innerText = slider1.value; // Display the default slider value input1.value = slider1.value; // Update the current slider value (each time you drag the slider handle) slider1.addEventListener("change", function() { const slider1Value = this.value; output1.innerText = slider1Value; input1.value = slider1Value; }); slider1.oninput = function() { output1.innerHTML = this.value; }
<div class="slidecontainer"> <input type="range" min="0" max="10" value="5" class="slider1" id="myRange1"> </div> <h4>Score: <span id="demo1"></span></h4> <div class="login-box"> <form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form"> <div class="user-box"> <input type="text" placeholder="Enter name of panel" name="data[Panel]" required> </div> <div> <input type="text" id="txtInput1"> </div> <ul class="actions"> <li><button type="submit">Submit Score</button></li> </ul> </form> </div>
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.