Question

我无法将滑块与总和组合在一起，因此，感谢您的帮助。我正在尝试建立一个屏幕，人们在这里使用滑块对使用0-100三种语言的情况进行评分。我的目标是同时保存这三个等级并显示其总和，以帮助定向参与者。我设法显示了收视率，但是我不知道如何对它们求和。下面是我的代码和输出图片：如您所见：滑块会更新，但不会显示总和>。<

<script> function updateTextInput1(val) {document.getElementById('textInput1').value=val;} </script>
<script> function updateTextInput2(val) {document.getElementById('textInput2').value=val;} </script>
<script> function updateTextInput3(val) {document.getElementById('textInput3').value=val;} </script>

<script>
function updateSum() {
  var textInput1 = +document.getElementById('textInput1').value;
  var textInput2 = +document.getElementById('textInput2').value;
  var textInput3 = +document.getElementById('textInput3').value;
  document.getElementById('sum').innerHTML = textInput1 + textInput2 + textInput3;
}
</script>

    <table style="color:black;">
        <tbody>
        <tr><td>Russian:</td>
            <td>
                <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput1(this.value);">
                <input name="useRussian" type="text" id="textInput1" value="" size="3">
            </td>
            <td>%</td>
        </tr>

        <tr><td>German:</td>
            <td>
                <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput2(this.value);">
                <input name="useGerman" type="text" id="textInput2" value="" size="3">
            </td>
            <td>%</td>
        </tr>

        <tr><td>Other:</td>
            <td>
                <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput3(this.value);">
                <input name="useOther" type="text" id="textInput3" value="" size="3">
            </td>
            <td>%</td>
        </tr>

            <tr><td>Total:</td>
        <td align="right"><input id="sum" size="3"></input>
        </td>
        <td>%</td>
    </tr>

        </tbody>
    </table>
    <br>

Answer 1

您的问题出在

document.getElementById('sum').innerHTML = textInput1 + textInput2 + textInput3;

您正在尝试将innerHTML添加到<input>。将innerHTML替换为value，它应该可以工作。

此外，您还需要将textInput强制转换为parseInt(textInput)的整数

Answer 2

您的代码中有一些错误：

<input id="sum" size="3"></input>不正确，应该为<input id="sum" size="3" />
不应该是document.getElementById('sum').innerHTML的正确方式是document.getElementById('sum').value
更新功能在+的|中有一个var。 例如。 var textInput1 = +document.getElementById('textInput1').value;应该只是var textInput1 = document.getElementById('textInput1').value;
您需要澄清一下，您正在将数字加在一起，所以我添加了Number(textInput1)，Number(textInput2)和Number(textInput3)

所有这些修复之后，我向每个updateSum();添加了onchange函数。

这是一个有效的代码段：

function updateTextInput1(val) {
  document.getElementById('textInput1').value = val;
}

function updateTextInput2(val) {
  document.getElementById('textInput2').value = val;
}

function updateTextInput3(val) {
  document.getElementById('textInput3').value = val;
}

function updateSum() {
  var textInput1 = document.getElementById('textInput1').value;
  var textInput2 = document.getElementById('textInput2').value;
  var textInput3 = document.getElementById('textInput3').value;
  document.getElementById('sum').value = Number(textInput1) + Number(textInput2) + Number(textInput3);
}

<table style="color:black;">
  <tbody>
    <tr>
      <td>Russian:</td>
      <td>
        <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput1(this.value);updateSum()">
        <input name="useRussian" type="text" id="textInput1" value="" size="3">
      </td>
      <td>%</td>
    </tr>

    <tr>
      <td>German:</td>
      <td>
        <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput2(this.value);updateSum()">
        <input name="useGerman" type="text" id="textInput2" value="" size="3">
      </td>
      <td>%</td>
    </tr>

    <tr>
      <td>Other:</td>
      <td>
        <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput3(this.value);updateSum()">
        <input name="useOther" type="text" id="textInput3" value="" size="3">
      </td>
      <td>%</td>
    </tr>

    <tr>
      <td>Total:</td>
      <td align="right"><input id="sum" size="3" /></td>
      <td>%</td>
    </tr>

  </tbody>
</table>
<br>

还有一种运行Javascript的更有效的方法！使用以下代码行：

function updateTextInput(id, val) {
    document.getElementById(id).value = val;
}

点击显示摘录以查看其运行情况。

function updateTextInput(id, val) {
  document.getElementById(id).value = val;
}

function updateSum() {
  var textInput1 = document.getElementById('textInput1').value;
  var textInput2 = document.getElementById('textInput2').value;
  var textInput3 = document.getElementById('textInput3').value;

  document.getElementById('sum').value = Number(textInput1) + Number(textInput2) + Number(textInput3);
}

.tablestyle {
  color: black;
}

<table class="tablestyle">
  <tbody>
    <tr>
      <td>Russian:</td>
      <td>
        <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput('textInput1', this.value);updateSum();">
        <input name="useRussian" type="text" id="textInput1" value="" size="3">
      </td>
      <td>%</td>
    </tr>

    <tr>
      <td>German:</td>
      <td>
        <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput('textInput2', this.value);updateSum();">
        <input name="useGerman" type="text" id="textInput2" value="" size="3">
      </td>
      <td>%</td>
    </tr>

    <tr>
      <td>Other:</td>
      <td>
        <input type="range" name="rangeInput" min="0" max="100" step="5" onchange="updateTextInput('textInput3', this.value);updateSum();">
        <input name="useOther" type="text" id="textInput3" value="" size="3">
      </td>
      <td>%</td>
    </tr>

    <tr>
      <td>Total:</td>
      <td align="right"><input id="sum" size="3" /></td>
      <td>%</td>
    </tr>

  </tbody>
</table>
<br>

HTML：如何同时使用滑块和添加字段

2 个答案: