javascript - 如何在html中显示 slider 值？

我最近在做一个演示算术数列用法的项目。用户将使用 slider 输入起始项的值，即 t0；差，即d；项数，表示为 n。但是，我无法使代码正常工作。我在这篇文章中使用了解决方案:HTML5 input type range show range value .下面是我的代码演示:

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;

function genTn() {
    reset();
    t0 = document.getElementById("t0").value;
    difference = document.getElementById("d").value;
    numOfTerms = document.getElementById("tn").value;
    var tn;
    document.getElementById('buildButton').style.display = 'none';
    for (n = 0; n < numOfTerms; n++) {
        tn = t0 * 1 + difference * n;
        setTimeout(buildNextOne, 3000 * n, n, tn);
    }
    setTimeout(showButton, 3000 * numOfTerms);
    document.getElementById("formulat0").innerHTML = t0;
    document.getElementById("formulad").innerHTML = difference;
    document.getElementById("formulan").innerHTML = numOfTerms;
}

function buildNextOne(n, tn) {
    var insert = '<div class="col-sm-4 col-md-2 boxed center">'
    insert += 't<sub>' + n + '</sub><br>'
    insert += '<span class="tn">' + tn + '</span><br>'
    insert += getPicsRepresentOfNumber(tn);
    insert += '</div>'
    document.getElementById("boxArea").innerHTML += insert;

    var msg = new SpeechSynthesisUtterance(tn);
    window.speechSynthesis.speak(msg);
}

function showButton() {
    document.getElementById('buildButton').style.display = '';
}

function reset() {
    document.getElementById("boxArea").innerHTML = "";
}

function getPicsRepresentOfNumber(number) {
    var totalHund = 0,
        totalTens = 0,
        totalOnes = 0,
        returnHtml = '';

    totalHund = Math.abs(parseInt(number / 100));
    var diffAfterRemovingHund = number % 100;
    totalTens = Math.abs(parseInt(diffAfterRemovingHund / 10));
    totalOnes = Math.abs(parseInt(diffAfterRemovingHund % 10));

    for (var i = 0; i < totalHund; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeHundred.png'>&nbsp" : "<img src='imgs/hundred.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp"
        }
    }
    returnHtml += "<br>";
    for (var i = 0; i < totalTens; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeTen.png'>&nbsp" : "<img src='imgs/ten.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp";
        }
    }
    returnHtml += "<br>";
    for (var i = 0; i < totalOnes; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeOne.png'>&nbsp" : "<img src='imgs/one.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp";
        }
    }
    returnHtml += "<br>";
    return returnHtml;
}

function updateT0Input(t0) {
    document.getElementById("updatet0").value = t0;
}

function updateDInput(difference) {
    document.getElementById("updated").value = difference;
}

function updateNInput(numOfTerms) {
    document.getElementById("updaten").value = numOfTerms;
}

.center {
    text-align: center;
}

#equation {
    background-color: lightgreen;
    text-align: center;
    border-radius: 10%;
}

body {
    background-color: lightblue;
}

#formula {
    background-color: lightgreen;
}

.boxed {
    border: 1px solid gray;
    margin-top: 10px;
    background-color: beige;
}

.tn {
    font-size: 3em;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Assignment 10a2</title>
</head>

<body>
    <div id="formula">
        Formula: <br>
        t<sub>n</sub> = <span id="formulat0">t<sub>0</sub></span> + <span id="formulad">d</span>*<span id='formulan'>n</span> <br>
        <br>
        t<sub>0</sub> = <span id="updatet0"></span>
        <input type="range" min="-50" max="50" value="0" id="t0" class="slider" onchange="updateT0Input(this.value);">
        <br>
        d = <span id="updated"></span>
        <input type="range" min="-50" max="50" value="0" id="d" class="slider" onchange="updateDInput(this.value);">
        <br>
        n = <span id="updaten"></span>
        <input type="range" min="1" max="20" value="10" id="tn" class="slider" onchange="updateNInput(this.value);">
        <br>
        <button id="buildButton" style="display:''" type="button" class="btn btn-warning"
            onclick="genTn()">Generate</button>
    </div>

    <br>

    <div class="container">
        <div class="row" id="boxArea">
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <script src="10a2.js"></script>
</body>

我添加了函数 updateT0Input、updateDInput 和 updateNInput:

function updateT0Input(t0) {
    document.getElementById("updatet0").value = t0;
}

function updateDInput(difference) {
    document.getElementById("updated").value = difference;
}

function updateNInput(numOfTerms) {
    document.getElementById("updaten").value = numOfTerms;
}

我的 html 滑动条在这里:

        t<sub>0</sub> = <span id="updatet0"></span>
        <input type="range" min="-50" max="50" value="0" id="t0" class="slider" onchange="updateT0Input(this.value);">
        <br>
        d = <span id="updated"></span>
        <input type="range" min="-50" max="50" value="0" id="d" class="slider" onchange="updateDInput(this.value);">
        <br>
        n = <span id="updaten"></span>
        <input type="range" min="1" max="20" value="10" id="tn" class="slider" onchange="updateNInput(this.value);">

我做错了什么吗？

请不要介意演示中无法显示的图像

最佳答案

JSFiddle 与您的代码片段:https://jsfiddle.net/u92ws7ce/1/

这是你的 HTML，类名稍作修改:

 t<sub>0</sub> = <span id="updatet0"></span>
  <input type="range" min="-50" max="50" value="0" id="t0" class="slider1" onchange="updateT0Input(this.value);">
  <p>Value: <span id="demo1"></span></p>
  <br>
  d = <span id="updated"></span>
  <input type="range" min="-50" max="50" value="0" id="d" class="slider2" onchange="updateDInput(this.value);">
  <p>Value: <span id="demo2"></span></p>
  <br>
  n = <span id="updaten"></span>
  <input type="range" min="1" max="20" value="10" id="tn" class="slider3" onchange="updateNInput(this.value);">
  <p>Value: <span id="demo3"></span></p>

并将其添加到您的 JS 文件中:

var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
}

var slider2 = document.getElementById("d");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}

var slider3 = document.getElementById("tn");
var output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;

slider3.oninput = function() {
  output3.innerHTML = this.value;
}

确保使用唯一类名和 ID 来标识每个 slider 。您需要将其重构为可编程的，并使用函数来封装重复逻辑。

引用:https://www.w3schools.com/howto/howto_js_rangeslider.asp

关于javascript - 如何在html中显示 slider 值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56033426/

javascript - 如何在html中显示 slider 值？

上一篇：html - 在 CSS 中，访问过的链接不会改变颜色

下一篇：html - 单独的影子根中是否允许重复 ID？