JavaScript 计算结果不正确

IT技术 javascript calc
2021-01-31 10:28:35

我是 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。

谢谢你的帮助!

2个回答

所述value的一个input始终是一个字符串,所以+最终是字符串连接("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此外,+""is 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);
    

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

干得好,TJ克劳德
2021-04-13 10:28:35

问题是您“添加”了一个字符串,而不是一个数字。+JavaScript 中运算符有多种语义,只要一个操作数是字符串,它就会进行字符串连接。

为防止出现这种情况,请使用一元运算+将字符串转换为数字