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。对于ISOform，我在600次击球中输入了30个双打，5个三分球和20个本垒打，并且该功能返回501.767而不是.166。我在这里的问题中搜索得非常彻底，并没有找到任何描述问题的东西，并试图操纵我的方程但却找不到原因。任何帮助，或者如果有人知道一个工具，它将向我展示正在执行的la python导师类型程序，将非常感激。

Answer 1

您遇到了常见的JavaScript gotcha ，+同时充当了加法运算符和字符串连接运算符。当您从表单中提取值时，它们是字符串，并且此表达式为：

AB - K - HR + SF

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

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

你的第二个问题可能看起来不同，但它是由同样的事情造成的。您只需要在对它们进行算术运算之前转换字符串。

Javascript分部返回错误的数字

1 个答案: