Javascript除法返回错误的数字

Question

我正在尝试为课程创建一个简单的网页，用户可以在其中计算棒球指标统计信息。 我目前有以下HTML：

<div>
    <h2>BABIP calculator</h2>

    <p class="extra">If number of sacrifice flies is not known it can be left blank and the BABIP calculation should still be fairly accurate as sacrifice flies typically account for a very small amount of At-Bats</p>
    <form id="BABIPform">
        <div>
            <label for="hits">Hits</label>
            <input type="text" name="hits" id="hits" value="0" min="0" required>
        </div>
        <div>
            <label for="homeruns">Homeruns</label>
            <input type="text" name="homerunsBABIP" id="homerunsBABIP" value="0" min="0" required>
        </div>
        <div>
            <label for="atBats">At-Bats</label>
            <input type="text" name="atBats" id="atBatsBABIP" value="0" min="0" required>
        </div>
        <div>
            <label for="k">Strikeouts</label>
            <input type="text" name="k" id="k" value="0" min="0" required>
        </div>
        <div>
            <label for="sf">Sacrifice Flies</label>
            <input type="text" name="sf" id="sf" value="0" min="0">
        </div>
        <div>
            <label for="babip">BABIP</label>
            <input type="text" name="babip" id="babip" disabled>
        </div>
        <div>
            <input type="submit" value="Calculate" id="submitBABIP">
        </div>
    </form>
</div>
<div>
        <h2>ISO calculator</h2>

    <p class="extra">ISO is a metric used to determine a player's raw power ouput more accurately than the standard SLG % by disregarding singles</p>
    <form id="ISOform">
        <div>
            <label for="doubles">2B</label>
            <input type="text" name="doubles" id="doubles" value="0" min="0" required>
        </div>
        <div>
            <label for="triples">3B</label>
            <input type="text" name="triples" id="triples" value="0" min="0" required>
        </div>
        <div>
            <label for="homeruns">HR</label>
            <input type="text" name="homeruns" id="homerunsISO" value="0" min="0" required>
        </div>
        <div>
            <label for="atBats">At-Bats</label>
            <input type="text" name="atBats" id="atBatsISO" value="0" min="0" required>
        </div>
        <div>
            <label for="iso">ISO</label>
            <input type="text" name="iso" id="iso" disabled>
        </div>
        <div>
            <input type="submit" value="Calculate" id="submitISO">
        </div>
    </form>
</div>

和以下JS一起使用。

function calculateBABIP() {
    'use strict';
    var BABIP;
    var AB = document.getElementById('atBatsBABIP').value;
    var H = document.getElementById('hits').value;
    var HR = document.getElementById('homerunsBABIP').value;
    var K = document.getElementById('k').value;
    var SF = document.getElementById('sf').value;
    BABIP = ((H-HR)/(AB-K-HR+SF)) 
    BABIP = BABIP.toFixed(3);
    document.getElementById('babip').value = BABIP;
    return false;
}

function initBABIP() {
    'use strict';
    var BABIPform = document.getElementById('BABIPform');
    BABIPform.onsubmit = calculateBABIP;
}


function calculateISO() {
    'use strict';
    var ISO;
    var doubles = document.getElementById('doubles').value;
    var triples= document.getElementById('triples').value;
    var HR = document.getElementById('homerunsISO').value;
    var AB = document.getElementById('atBatsISO').value;
    ISO = ((doubles)+(2*triples)+(3*HR))/AB;
    ISO = ISO.toFixed(3);
    document.getElementById('iso').value = ISO;
    return false;
}

function initISO() {
    'use strict';
    var ISOform = document.getElementById('ISOform');
    ISOform.onsubmit = calculateISO;
}

两种形式的问题不同。 对于我的第一个表格（BABIPform），我测试了一个简单的示例，该示例在60个击球中击中30个命中点，应等于.500，但是它将答案前加0，因此其格式为0.050。
对于ISO格式，我在600次击球中输入了30次双打，5次三联和20次本垒打，该函数返回501.767而不是.166。 我在这里的问题中进行了彻底的搜索，没有找到任何能描述问题的东西，并且试图操纵我的方程式但找不到原因。 任何帮助，或者如果有人知道某个工具，它将向我展示正在执行的la python家教类型程序，将不胜感激。

Answer 1

您遇到了一个常见的JavaScript 陷阱 ，即+用作加法运算符和字符串串联运算符。 当您从表单中拉出值时，它们是字符串，并且是以下表达式：

AB - K - HR + SF

...为您输入的值返回"600" 。 这实际上是字符串"60"和"0" 。 换句话说，减法是按您期望的那样执行的，但是没有加法（它是字符串连接）。

要解决此问题，您应该首先将所有数字字符串转换为数字（例如使用parseInt ）；

您的第二个问题可能看起来有所不同，但这是由同一件事引起的。 您只需要在对字符串执行算术之前就将其转换。