javascript - JavaScript 计算结果不正确

Question

这个问题已经有答案了:

Adding two numbers concatenates them instead of calculating the sum (24 个回答)

已关闭 去年。

我对 JavaScript 相当陌生，想要将我的一个计算电子表格转换为可以在网页上使用的内容。但是，计算给出了错误的结果。

这是我的 JavaScript:

<script type="text/javascript" language="JavaScript">
        function calc() {
            var onerepmax = document.wodCalculate.oneRepMax.value;
            var percent = document.wodCalculate.percentOfOneRepMax.value / 100;
            var addkg = document.wodCalculate.plusKg.value;
            var zwischenschritt = onerepmax * percent;
            var gewicht = zwischenschritt + addkg;
            document.getElementById("weight").innerHTML = gewicht;
        };
</script>

这是 HTML:

<form action="" id="wodCalculate" name="wodCalculate">
        <table cellspacing="0" cellpadding="10" border="0">
            <tr><td>1 Rep Max</td><td><input type=text name="oneRepMax" value="">&nbsp;kg<br></td></tr>
            <tr><td>% vom 1RM</td><td><input type=text name="percentOfOneRepMax" value="">&nbsp;%<br></td></tr>
            <tr><td>Plus x kg</td><td><input type=text name="plusKg" value="">&nbsp;kg<br></td></tr>
            <tr><td><input type="button" value="Calculate" onClick="calc()"></td></tr>
        </table>
</form>
<div id="weight">Weight</div>

直到将“onerepmax”与“百分比”相乘时，它都可以正常工作。然而，一旦将“addkg”添加到乘法结果中(即给我“gewicht”)，结果就会变得不正确。

比如我想取100kg的10%，再加10kg。计算结果不是 20kg，而是 1010。

感谢您的帮助!

Answer 1

输入的值始终是一个字符串，因此+最终成为字符串连接("10"+ "10" 是 "1010"，而不是 10 + 10，即 20。

如果您使用的是input type="number"(OP不是，但其他人找到这个答案可能)并且浏览器支持它们，您可以使用valueAsNumber相反:

var onerepmax = document.wodCalculate.oneRepMax.valueAsNumber;

如果您使用type="text"或浏览器不支持valueAsNumber:

如果用户输入值是整数，则可以使用 parseInt(value, 10)(10 = 小数，以 10 为底)来转换用户输入值，例如:

var onerepmax = parseInt(document.wodCalculate.oneRepMax.value, 10);

这只是一种选择，不过，您有多种选择:

• 一元 + 运算符:value = +value 将使用 JavaScript 引擎的标准规则将字符串强制转换为数字。该数字可以包含小数部分(例如，+"1.50" 为 1.5)。字符串中的任何非数字(科学记数法的 e 除外)都会导致结果 NaN。另外，+"" 是 0，这可能不直观。

  var onerepmax = +document.wodCalculate.oneRepMax.value;
  

• Number 函数:value = Number(value)。与 + 执行相同的操作。

  var onerepmax = Number(document.wodCalculate.oneRepMax.value);
  

• parseInt 函数，通常带有基数(基数):value = parseInt(value, 10)。这里的缺点是 parseInt 会转换它在字符串开头找到的任何数字，但忽略字符串后面的非数字，因此 parseInt("100asdf", 10) 是 100，而不是 NaN。顾名思义，parseInt 仅解析整数。

  // (Same as the first one above)
  var onerepmax = parseInt(document.wodCalculate.oneRepMax.value, 10);
  

• parseFloat 函数:value = parseFloat(value)。允许小数值，并且始终以十进制形式工作(绝不是八进制或十六进制)。 parseInt 对字符串末尾的垃圾执行同样的操作，parseFloat("123.34alksdjf") 是 123.34。

  var onerepmax = parseFloat(document.wodCalculate.oneRepMax.value);
  

因此，请选择适合您的用例的工具。 :-)