坚持使用 JavaScript 进行简单计算答案

【问题标题】：Stuck on a simple calculation with JavaScript坚持使用 JavaScript 进行简单计算
【发布时间】：2014-03-07 10:39:02
【问题描述】：

我（完全是 Javascript 菜鸟）正在尝试编写一个 javascript 来创建通用航空飞机的重量和平衡计算器。

但是我一直卡在路上。用户应该输入重量信息，然后计算器应该计算飞机的力矩和/或重量以及总结相应的字段。

不幸的是，我无法获取脚本来计算用户输入。有人有什么建议吗？

我的 HTML 是：（JS 在下方）

<form id="form" onsubmit="return false;">
<table>
    <tr>
        <th>Station</th>
        <th>Weight</th>
        <th></th>
        <th>Arm</th>
        <th></th>
        <th>Moment</th>
        <th></th>
    </tr>
    <tr>
        <td>Empty Weight</td>
        <td>
            <script type="text/javascript">
                document.write(weight);
            </script>
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(acarm);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(moment);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>Pilot</td>
        <td>
            <input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Pilot" />
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(afseat);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(pimom);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>CoPilot</td>
        <td>
            <input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="CoPilot" />
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(afseat);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(cpmom);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>Pax 1</td>
        <td>
            <input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Pax1" />
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(arseat);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(p1mom);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>Pax 2</td>
        <td>
            <input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Pax2" />
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(arseat);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(p2mom);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>Fuel</td>
        <td>
            <input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Fuel" />
        </td>
        <td>l</td>
        <td>
            <script type="text/javascript">
                document.write(abag);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(bamom);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>Baggage</td>
        <td>
            <input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Baggage" />
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(abag);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(bamom);
            </script>
        </td>
        <td>m</td>
    </tr>
    <tr>
        <td>Total</td>
        <td>
            <script type="text/javascript">
                document.write(totweight);
            </script>
        </td>
        <td>kg</td>
        <td>
            <script type="text/javascript">
                document.write(totarm);
            </script>
        </td>
        <td>kg-m</td>
        <td>
            <script type="text/javascript">
                document.write(totmom);
            </script>
        </td>
        <http://jsfiddle.net/#savetd>m</td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" onclick="weightandbalance();" />
        </td>
        <td></td>
        <td></td>
    </tr>
</table>

这里是 JS：

     // Basic Aircraft Set Up
    var weight = 627.9; // Basic Empty Weight in kg
    var moment = 201.22; // Moment in m-kg
    var acarm = Math.round((moment / weight) * 10000) / 10000;

    var mtow = 1002; // Maximum Take Off Weight in kg
    var afseat = 0.41; // Front Seat Arm in m
    var arseat = 1.19; // Rear Seat Arm in m
    var abag = 1.9; // Baggage Area Arm in m
    var afuel = 1.12; // Fuel Tank Arm in m


function weightandbalance() {

    var Pilot = parseFloat(document.getElementById("Pilot").value);
    var CoPilot = document.getElementById("CoPilot").value;
    var Pax1 = document.getElementById("Pax1").value;
    var Pax2 = document.getElementById("Pax2").value;
    var Baggage = document.getElementById("Baggage").value;
    var Fuel = document.getElementById("Fuel").value;

    // Perform Calculations
    var pimom = Pilot * afseat;
    var cpmom = CoPilot.value * afseat;
    var p1mom = Pax1.value * arseat;
    var p2mom = Pax2.value * arseat;
    var bamom = Baggage.value * abag;
    var fumom = Fuel.value * afuel * 0.71;

    var totweight = weight + Pilot + CoPilot + Pax1 + Pax2 + Baggage + Fuel;
    var totmom = moment + pimom + cpmom + p1mom + p2mom + bamom + fumom;
    var totarm = Math.round((totmom / weight) * 10000) / 10000;



}

// Allow only numbers
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false;

    return true;
}


//Default Values    
function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}

function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}

【问题讨论】：

尝试时会发生什么。 “拿不到”是什么意思？您是否打开了开发者控制台并查看了错误？
@Phrogz 感谢您回复我。是的，我试图检查开发者控制台。但是它不报告任何错误。此外，如果我在函数 weightandbalance() 中添加警报（Pilot），我会弹出一个带有我在表单中设置的值的弹出窗口。似乎变量已设置，但计算命令不会运行。
你的主JS是否加载在中？
我创建了一个jsfiddle，希望能让人们更容易地帮助您解决这个问题。
感谢您的反馈。我很感激。它使用两个警报更新了 jsfiddle，这表明计算基本有效。因此，我得出结论，表中的输出存在问题。我将阅读尽量减少 document.write() 的使用

标签： javascript

【解决方案1】：

您可能希望在代码中的某处放置一个 console.log() 语句，然后为您的浏览器打开开发者控制台以查看它打印出的内容。

比如在你计算totweight什么的之后放：

var totweight = weight + Pilot + CoPilot + Pax1 + Pax2 + Baggage + Fuel;
console.log(totweight);

如果您使用的是 Chrome，您可以通过按 CtrlShiftJ (Windows) 或 CmdOptJ (Mac)。

您可能想要做的另一件事是对其他变量执行 parseFloat()，就像对 Pilot 变量所做的那样。您可能会在此处的代码 sn-p 中返回字符串而不是数字。所以你可以这样做：

console.log(typeof CoPilot);

然后查看控制台在浏览器中打印的内容。如果它打印出“字符串”而不是“数字”，那么 ParseFloat() 也会知道这些变量。

您还可以执行以下操作来检查 CoPilot（或任何其他变量）是否为 Not-A-Number：

console.log( isNan(CoPilot) );

我希望这会有所帮助。

【讨论】：