请原谅,因为我是新手编码员。我有一个滑块,当我拖动它并用 span 标签显示它时输出一个值
<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>
链接到 javascript 代码
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; }
因为我想将滑块值的输出传递给表单标签,因为我想使用 API 将值提交给 googlesheet
一切正常,但是,每当我拖动滑块时,表单占位符上显示的值都不会更新。我想同步它们并实时更新。这可能吗?我错过了什么明显的东西吗?
请救救我。谢谢!
有几个错误,主要是在变量的命名中,但最重要的是在你的eventListener.
eventListener
如您所见,里面的第一个元素()应该是 的类型,而event不是变量的名称。所以我放了change(在这里查看更多信息),而不是input1.
()
event
change
input1
正如我所说,其他更改主要是输入错误。
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>