代码之家  ›  专栏  ›  技术社区  ›  John

如何将滑块值与表单占位符passthrough同步?

  •  0
  • John  · 技术社区  · 2 年前

    <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

    请救救我。谢谢!

    1 回复  |  直到 2 年前
        1
  •  0
  •   aca    2 年前

    有几个错误,主要是在变量的命名上,但最重要的是在 eventListener .

    see ,内部第一个元素 () 应该是 event ,而不是变量的名称。所以我把 change ( see more info here 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>