我错过了什么？计算不会显示在字段中

Question

我正在尝试制作一个面积计算器，但我不知道我错过了什么。

在每个字段中输入数字时，区域字段不会更新。

有什么建议吗？我想知道我是否遗漏了一些非常重要的东西。

function calculateArea() {
  var form = document.getElementById("calc");
  var sLength = parseFloat(form.elements["slab_length"].value);
  var sHeight = parseFloat(form.elements["slab_width"].value);

  var slabsArea = sHeight * sLength;

  //slabsArea = Math.round(slabsArea);
  //document.getElementById("slabsArea").value = slabsArea;
  form.elements["slabsArea"].value = slabsArea;
  return slabsArea;
}

<form id="calc">
  <table>
    <tr>
      <th style="text-align: left;"><label>Slab Width (m): </label></th>
      <th>
        <div class="input-box">
          <input type="text" name="slab_width" onkeypress="return isNumber(event)" onkeyup="calculateArea()" required="" class="form-control">
        </div>
      </th>
    </tr>
    <tr>
      <th style="text-align: left;"><label>Slab Length (m): </label></th>
      <th>
        <div class="input-box">
          <input type="text" name="slab_length" onkeypress="return isNumber(event)" onkeyup="calculateArea()" required="" class="form-control">
        </div>
      </th>
    </tr>
    <tr>
      <th style="text-align: left;"><label>Total Area (m2):</label></th>
      <th>
        <div class="input-box">
          <input type="text" name="slabsArea" disabled="" class="form-control">
        </div>
      </th>
    </tr>

  </table>
</form>

Answer 1

我会为你简化这个，你可以根据需要更新你的 HTML table 以按照你喜欢的方式格式化它。

首先，不要使用keypress，使用keyup。这将获得输入的更新值。

接下来，使用数字输入强制数字。它是内置的，比编写您自己的数字解析器容易得多。这是示例 HTML:

第三，为您的元素添加 ID。这使得选择它们更加高效和容易。

为简洁起见，这是一个使用输入和事件侦听器的示例：

window.addEventListener("DOMContentLoaded", () => {
  const userInputs = document.getElementsByClassName("userInput");
  for (let x=0, input; input = userInputs[x]; x++)
  {
    input.addEventListener("keyup", (evt) => { 
      let length = parseFloat(document.getElementById("slabLength").value);
      let width = parseFloat(document.getElementById("slabWidth").value);
      document.getElementById("slabArea").value = length * width;
    })
  }
});

<input id="slabLength" class="userInput" type="number" value="0">
<input id="slabWidth" class="userInput" type="number" value="0">
<input id="slabArea" type="number" readonly value="0">

我错过了什么？计算不会显示在字段中

What am I missing? Calculation won't show in the field

html

javascript

calculator

area