如何改进这个 Javascript 计算工具？

Question

我正在制作一个计算工具。我对javascript不是很熟悉，所以我的代码看起来有点不对劲。应该进行哪些编辑才能使此工具正常工作？我想要像下面的等式一样计算输入数字：

calculate = function()
{
  var x = document.getElementById('a').value;
  var y = document.getElementById('b').value;
  var z = document.getElementById('c').value; 
  document.getElementById('result').value = x * 588 + y * 28 + z + 44032
}

<input type="number" id="a" oninput="calculate()"/> × 588 +
<input type="number" id="b" oninput="calculate()"/> × 28 +
<input type="number" id="c" oninput="calculate()"/> + 44032 =
<input type='text' id="result"/>

方程：(x × 588) + (y × 28) + z + 44032 = 结果

Answer 1

• 当您使用document.getElementById 获取<input /> 元素时，它会返回一个HTMLInputElement 类型的JavaScript object，它具有.value 属性（您正在使用）。
• 但是，HTMLInputElement.value 属性返回 string 值，而不是 number 值。
  • 您可能知道 valueAsNumber 属性，但这不适用于 <input type="text" /> - 仅适用于 <input type="number" />（幸运的是，您的 HTML 是），但请始终检查 NaN！
• JavaScript 通常被描述为“松散类型”，但我更喜欢将其称为“wtfy 类型”，因为its rules for implicit type conversions are inconsistent。
  • 在 JavaScript 和 PHP 等松散类型语言中的一个常见“功能”是 implicit conversion of string values to number values，但最好避免完全依赖该行为，并坚持始终使用 @987654339 将 string 值显式转换为 number 值@、parseFloat(string) 或 Number(any)。

这样做：

var calculate = function()
{
    const x = parseFloat( document.getElementById('a').value );
    const y = parseFloat( document.getElementById('b').value );
    const z = parseFloat( document.getElementById('c').value );
    const o = document.getElementById('result');

    if( isNaN(x) || isNaN(y) || isNaN(z) ) {
        o.value = "Invalid input.";
    }
    else {
        const result = x * 588 + y * 28 + z + 44032;
        o.value = result.toString();
        // If `result` will be fractional then use `toFixed` instead of `toString`.
        // This is to avoid very long string representations of imprecise floating-point numbers due to how IEEE-754 works.
    }
}

input[type=number] {
    text-align: right;
    width: 5em;
}
input#result {
    text-align: right;
    width: 10em;
}

<input type="number" id="a" oninput="calculate()" /> × 588 +
<input type="number" id="b" oninput="calculate()" /> × 28 +
<input type="number" id="c" oninput="calculate()" /> + 44032 =
<input type='text' id="result" readonly />

Answer 2

Javascript 类型在和你玩游戏 :)，它实际上是在执行连接。 当您读取值时，您必须将其转换为实际类型，即数字。 这是工作代码

<input type="number" id="a" oninput="calculate()"/> × 588 +
<input type="number" id="b" oninput="calculate()"/> × 28 +
<input type="number" id="c" oninput="calculate()"/> + 44032 =
<input type='text' id="result"/>
<script>
calculate = function()
{
  var x = Number(document.getElementById('a').value);
  var y = Number(document.getElementById('b').value);
  var z = Number(document.getElementById('c').value); 

  document.getElementById('result').value = (x * 588) + (y * 28) + z + 44032
}
</script>

还有其他方法可以实现相同的目标，例如 ParseInt 和 ParseFloat。 如果您希望字符串在其中包含其他字符时以 NaN 失败，Number() 实际上可能是更好的选择。

因为

Number('1234'); // returns 1234
Number('12.34'); // returns 12.34
Number('3.4040blahblahblac'); // returns NaN
Number('49cm'); // returns NaN