Stuck on a simple calculation with JavaScript

Question

I (total Javascript Noob) am trying to write a javascript to create a weight and balance calculator for general aviation aircraft.

However I am getting stuck along the way. The user is supposed to enter weight information and the calculator should then calculate the airplanes Moment and or weight as well as sum up the corresponding fields.

Unfortunately I can't get the script to calculate the users inputs. Does anyone have a suggestion?

My HTML is: (JS further down below)

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

And here is the 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 = '';
    }
}

Answer 1

You may want to put a console.log() statement in your code somewhere and open the developer console for your browser to see what it prints out.

For example, put it after you calculate totweight or something:

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

If you're using Chrome, you can open the console by pressing CtrlShiftJ (Windows) or CmdOptJ (Mac).

Another thing you may want to do is to do parseFloat() on your other variables like you did for the Pilot variable. You may be getting back strings instead of numbers in your code snippet here. So you could do something like this:

console.log(typeof CoPilot);

And see what the console prints out in the browser. If it prints out "string" instead of "number", you'll know to ParseFloat() those variables as well.

You can also do the following to check if CoPilot (or any other variable) is Not-A-Number:

console.log( isNan(CoPilot) );

I hope this helps.