Question

希望创建一个立方码计算器，但实际上并不是JS最精明的。当我使用较小的数字时，它们会给我正确的答案，但是当我增大数字时，它们会真正消失。公式应为立方码=（以英尺为单位的长度*以英尺为单位的宽度*（以英寸为单位的深度/ 12））/ 27。我要去哪里错了？预先感谢！

    var l = 0;
    var w = 0;
    var d = 0;
    var lw = 0;
    var y = 0;
    function calc(obj) {
        var e = obj.id.toString();
        if (e == 'length') {
            l = Number(obj.value);
            w = Number(document.getElementById('width').value);
            d = Number(document.getElementById('depth').value);
        } else {
            l = Number(document.getElementById('length').value);
            w = Number(obj.value);
            d = Number(document.getElementById('depth').value);
        }
        lw = l * w;
        y = (lw * (d/12))/27;
      if (isNaN(y)) {
       document.getElementById('update').innerHTML = "Please enter valid numbers.";
    } else {
        document.getElementById('total').value = +y.toFixed(4);
        document.getElementById('update').innerHTML = +y.toFixed(4);
        document.getElementById('yard-check').innerHTML = " yards&#179;";
      }
    }

    <form name="addem" action="" id="addem" autocomplete="off">
    <div id="outerwrapper">
    <div class="inputwrapper">
      <div class="inputfield">
        <p>Length</p>
        <p><input type="text" id="length" name="length" onkeyup="calc(this)" step="any" placeholder="in feet" /><span style="padding-left:2%;">ft</span></p>
      </div>
      <div class="inputfield">
        <p>Width</p>
        <p><input type="text" id="width" name="width" onkeyup="calc(this)" step="any" placeholder="in feet" /><span style="padding-left:2%;">ft</span></p>
      </div>
      <div class="inputfield">
        <p>Depth</p>
        <p><input type="text" id="depth" name="depth" onkeyup="calc(this)" step="any" placeholder="in inches" /><span style="padding-left:2%;">in</span></p>
      </div>
    </div>
    <div id="cubictotal">
      <input type="hidden" id="total" name="total" value="0" />
      <h3 id="p-yards"><span id="update">0 yards&#179;</span><span id="yard-check"></span></p>
    </div>
  </div>
</form>

Answer 1

您的计算实际上没有错。问题是onkeyup事件和您与之一起传递的对象。您只发现了两种情况：

Onkeyup由长度输入触发
Onkeyup由宽度输入触发

第三个选项-深度输入触发onkeyup事件-未显式编码，因此默认为else情况，即情况2。结果是w和d参数将设置为任何深度值。看看最后一次更新宽度或长度输入时会发生什么。有正确的答案！

我建议您始终按ID查找尺寸元素，以便计算不依赖于实际触发计算的任何事物。

Answer 2

您想/从DOM中获取calc函数中的值太复杂了。通过直接引用每个输入的值来简化整个if/else部分；你的数学根本不是问题。

function calc() {
  const l = +document.getElementById('length').value;
  const w = +document.getElementById('width').value;
  const d = +document.getElementById('depth').value;

  const y = (l * w * (d / 12)) / 27;

  if (isNaN(y)) {
    document.getElementById('update').innerHTML = "Please enter valid numbers.";
  } else {
    document.getElementById('total').value = +y.toFixed(4);
    document.getElementById('update').innerHTML = +y.toFixed(4);
    document.getElementById('yard-check').innerHTML = " yards&#179;";
  }
}

<form name="addem" action="" id="addem" autocomplete="off">
  <div id="outerwrapper">
    <div class="inputwrapper">
      <div class="inputfield">
        <p>Length</p>
        <p><input type="text" id="length" name="length" onkeyup="calc(this)" step="any" placeholder="in feet" /><span style="padding-left:2%;">ft</span></p>
      </div>
      <div class="inputfield">
        <p>Width</p>
        <p><input type="text" id="width" name="width" onkeyup="calc(this)" step="any" placeholder="in feet" /><span style="padding-left:2%;">ft</span></p>
      </div>
      <div class="inputfield">
        <p>Depth</p>
        <p><input type="text" id="depth" name="depth" onkeyup="calc(this)" step="any" placeholder="in inches" /><span style="padding-left:2%;">in</span></p>
      </div>
    </div>
    <div id="cubictotal">
      <input type="hidden" id="total" name="total" value="0" />
      <h3 id="p-yards"><span id="update">0 yards&#179;</span><span id="yard-check"></span></p>
    </div>
  </div>
</form>

尝试制作立方码计算器，但公式不一致

2 个答案: