javascript 我想在html中使用一个slider组件来获取用户的输入,记录它并使用它来计算结果

nue99wik  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(97)

我正在使用谷歌应用程序脚本。我试图连接我的HTML文档到我的JS文档。这样我就可以从用户那里获得输入,并使用它来记录信息到谷歌工作表,并返回屏幕上的结果。我已经尝试了这么多的事情,并得出短。

<div class="card carousel-item">
    <div class="card-image">
        <img src="https://i.postimg.cc/htb6hMf4/Solution-Builder-Tech-Savvy.png" />
        <div class="row">
            <div class="range-field">
                <div id="min" class="col s1 rangeMinMaxText" style="display: inline">1</div>
                <div class="col s10">
                    <input type="range" id="qt1" min="1" max="5" oninput="updateSliderValue()" />
                </div>
                <div id="max" class="col s1 rangeMinMaxText" style="display: inline">5</div>
            </div>
        </div>
        <!--CLOSE ROW-->
    </div>
    <!--CLOSE CARD-->
</div>
document.getElementById("btn").addEventListener("click", doStuff);

function updateSliderValue() {
    var sliderValue = document.getElementById("qt1").value;
    // document.getElementById("sliderValue").innerHTML = sliderValue;
    surveyData.questionOne = sliderValue;
    console.log("Slider Value: " + sliderValue);
    surveyData = list.map(function (r) {
        Logger.log(r[0]);
    });
}

function doStuff() {
    var qt1 = document.getElementById("qt1");
    var qt2 = document.getElementById("qt2");
    var qt3 = document.getElementById("qt3");
    var qt4 = document.getElementById("qt4");
    var qt5 = document.getElementById("qt5");
    var qt6 = document.getElementById("qt6");
    var qt7 = document.getElementById("qt7");
    var qt8 = document.getElementById("qt8");
    var qt9 = document.getElementById("qt9");
    var qt10 = document.getElementById("qt10");
    var qt11 = document.getElementById("qt11");
    var qt12 = document.getElementById("qt12");

    surveyData.questionOne = qt1.value;
    surveyData.questionTwo = qt2.value;
    surveyData.questionThree = qt3.value;
    surveyData.questionFour = qt4.value;
    surveyData.questionFive = qt5.value;
    surveyData.questionSix = qt6.value;
    surveyData.questionSeven = qt7.value;
    surveyData.questionEight = qt8.value;
    surveyData.questionNine = qt9.value;
    surveyData.questionTen = qt10.value;
    surveyData.questionNine = qt11.value;
    surveyData.questionTen = qt12.value;
    Logger.log(surveyData);

    google.script.run.withSuccessHandler(updateResult).userResults(surveyData);
    google.script.run.userClicked(surveyData);

    function updateResult(result) {
        document.getElementById("result").value = result;
        M.textareaAutoResize($("result"));
        M.updateTextFields("result");
        $("result").val("result");
        Logger.log(surveyData);
    }
}

我尝试使用各种事件侦听器。我能够记录输入,但在将其添加到数组中时遇到麻烦。

abithluo

abithluo1#

试试这个。

<input type="range" min="0" max="10" value="0" oninput="rangeOnInput(this)">
<script>
  function rangeOnInput(input) {
    alert(input.value);
  }
</script>

相关问题