JavaScript 計算結果不正確

Question

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

input的value總是一個字符串，所以+最終是字符串連接（ "10" + "10"是"1010" ，而不是10 + 10是20 ）。

如果您使用的是input type="number" （OP 不是，但其他人可能會找到這個答案）並且瀏覽器支持它們，您可以使用valueAsNumber代替：

var onerepmax = document.wodCalculate.oneRepMax.valueAsNumber;

如果您使用type="text"或瀏覽器不支持valueAsNumber ：

如果用戶輸入值是parseInt(value, 10)可以使用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);

因此，請選擇適合您用例的工具。 :-)

Answer 2

問題是您“添加”了一個字符串，而不是一個數字。 JavaScript 中的+運算符有多種語義，只要一個操作數是字符串，它就會進行字符串連接。

為了防止這種情況，請使用一元+運算符將字符串轉換為數字。