javascript - 输出不会显示(javascript)

Question

我有 1 个输入。它必须打印出 2 个输出，其中 1 个为 -1，另一个为 -2。但输出没有显示任何内容。有人可以告诉我我在这里做错了什么吗？

代码:

// Meters en Centimeters value
function updateTotal() {
  const list = document.getElementsByClassName("AutosubmitCalculator");
  const values = [];
  for (let i = 0; i < list.length; ++i) {
    values.push(parseFloat(list[i].value));
  }
  let total = values.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue;
  });
  document.getElementById("schermentotaal").value = total - 2;
  document.getElementById("schermentotaal2").value = total - 1;
}

HTML 输入:

<div class="InputField InputMeters">
    <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="">
    <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>

HTML 输出:

<div class="SummaryRow">
  <strong>Schermen</strong>
  <input name="schermentotaal" type="text" id="schermentotaal" value=""></input>
</div>

<div class="SummaryRow">
  <strong>Palen en onderplaten</strong>
  <input name="schermentotaal2" type="text" id="schermentotaal2" value=""></input>
</div>

提前致谢:D

Answer 1

您没有在任何地方调用 updateTotal。我建议您在输入字段的 oninput 事件上运行此函数。这将使每当您输入数字时，它都会运行函数updateTotal。

您还遇到了一些其他错误，例如您尝试获取 id 为 total 的元素，但 HTML 中没有具有此 id 的元素。

document.getElementById("total").value

我已将其更改为 schermentotaal2，它是 HTML 中的有效 id:

document.getElementById("schermentotaal2").value

请参阅下面的工作示例:

function updateTotal() {
  const list = document.getElementsByClassName("AutosubmitCalculator");
  const values = [];
  for (let i = 0; i < list.length; i++) {
    values.push(parseFloat(list[i].value));
  }
  let total = values.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue;
  });
  document.getElementById("schermentotaal").value = (total - 2) || '';
  document.getElementById("schermentotaal2").value = (total - 1) || '';
}

<div class="InputField InputMeters">
  <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="" oninput="updateTotal()" />
  <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>


<div class="SummaryRow">
  <strong>Schermen</strong>
  <input name="schermentotaal" type="text" id="schermentotaal" value="" />
</div>

<div class="SummaryRow">
  <strong>Palen en onderplaten</strong>
  <input name="schermentotaal2" type="text" id="schermentotaal2" value="" />
</div>

此外，如果您只有一个输入，您可能需要重新考虑使用类来获取输入值，因为您不需要循环来从一个输入字段获取值。