Can I use a global variable with getElementById?

Question

I'm new to programming and cannot figure out how to use the global variables in my code correctly. I'm trying to use the global variables as my parameters when I call certain functions. What can I do to make this work? Any suggestions or advice would be much appreciated thank you.

<!DOCTYPE HTML>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <title>Loan Calculator</title>
        <script type="text/javascript">

            /* Input: Get the principal, intrest rate, years, payments per year and number of payments to date
             * Processing:  Calculating the monthly payment of a loan and loan payoff amount
             * Output: The monthly payment and payoff amount
             */

            var inv = document.getElementById("invest").value;
            var r = document.getElementById("rate").value;
            var num = document.getElementById("numyear").value;
            var per = document.getElementById("periods").value;
            var pay = document.getElementById("pay").value;
            var invest = parseFloat(inv);
            var rate = parseFloat(r);
            var numyear = parseFloat(num);
            var periods = parseFloat(per);
            var paytodate = parseFloat(pay);

            function doPayment() {
                var result = computePayment(invest, rate, numyear, periods);
                document.getElementById("output").innerHTML = result;

            }

            function doBalance() {
                var result = computeBalance(invest, rate, numyear, periods, paytodate);
                document.getElementById("secondOut").innerHTML = result;
            }

            function computePayment(principal, annualRate, years, periodsPerYear) {
                var p = (principal * annualRate / periodsPerYear) / (1 - Math.pow((1 + annualRate / periodsPerYear), -years * periodsPerYear));
                return p.toFixed(2);

            }

            function computeBalance(principal, annualRate, years, periodsPerYear, numberOfPaymentsPaidToDate) {
                var r = computePayment(invest, rate, numyear, periods);
                var f = principal * (Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) -
                    (r * ((Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) - 1) / (annualRate / periodsPerYear));
                return f.toFixed(2);
            }

        </script>
    </head>

    <body>
        <h1>Loan Calculator</h1><br>
        Amount Borrowed <input type="text" id="invest" size="5"> <br>
        Annual Rate <input type="text" id="rate" size="5"><br>
        Number of years <input type="text" id="numyear" size="5"><br>
        Payments per year <input type="text" id="periods" size="5"><br>
        Number of payments paid to date  <input type="text" id="pay" size="5"><br>
        <button type="button" onclick="doPayment()">Payment</button> <div id="output"></div> <br>
        <button type="button" onclick="doBalance()">Payoff amount</button><div id="secondOut"></div><br>
        <input type="button" value="Reset Form" onClick="reset"<button/>

    </body>
</html>

you memorize the form values before they are set, which won't work. — dandavis, Mar 16 '16 at 18:37
You also try to access the elements before they exist. See [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) — Felix Kling, Mar 16 '16 at 18:39
Thanks, trying to understand what you mean, its a bit confusing for me. — Jice, Mar 16 '16 at 18:44

neallred · Answer 1 · 2016-03-16T19:33:46.027

If you don't already have one, you will also need to define a reset function to reset your form. You could use something like:

  function reset(){
    document.getElementById("invest").value = "";
    document.getElementById("rate").value = "";
    document.getElementById("numyear").value = "";
    document.getElementById("periods").value = "";
    document.getElementById("pay").value = "";
  };

Also, you can shorten your variable declarations up significantly. You don't have to define the variables at first, you can just declare them and they get value of undefined. That is okay because you don't use them until they get a value (by you filling out the form and pressing the button). Also, you can cut out the intermediate variable by using parseFloat() on the longer named variable versions.

You can do:

var invest, rate, numyear, periods, paytodate;
function getValues(){
  invest = parseFloat(document.getElementById("invest").value);
  rate = parseFloat(document.getElementById("rate").value);
  numyear = parseFloat(document.getElementById("numyear").value);
  periods = parseFloat(document.getElementById("periods").value);
  paytodate = parseFloat(document.getElementById("pay").value);
}

score 0 · Answer 2 · answered Mar 16 '16 at 19:03

That effect happens because you're declaring your variables (and assigning their values) basically when the page loads. When the page loads, there is no information in your fields, so there's nothing to recover.

A simple solution is to get your values by the use of a "loader" function inside your methods:

var inv = 0;
var r = 0;
var num = 0;
var per = 0;
var pay = 0;
var invest = 0;
var rate = 0;
var numyear = 0;
var periods = 0;
var paytodate = 0;

function getValues() {
    inv = document.getElementById("invest").value;
    r = document.getElementById("rate").value;
    num = document.getElementById("numyear").value;
    per = document.getElementById("periods").value;
    pay = document.getElementById("pay").value;
    invest = parseFloat(inv);
    rate = parseFloat(r);
    numyear = parseFloat(num);
    periods = parseFloat(per);
    paytodate = parseFloat(pay);
}

function doPayment() {
    getValues();
    var result = computePayment(invest, rate, numyear, periods);
    document.getElementById("output").innerHTML = result;

}

function doBalance() {
    getValues();
    var result = computeBalance(invest, rate, numyear, periods, paytodate);
    document.getElementById("secondOut").innerHTML = result;
}

function computePayment(principal, annualRate, years, periodsPerYear) {
    getValues();
    var p = (principal * annualRate / periodsPerYear) / (1 - Math.pow((1 + annualRate / periodsPerYear), -years * periodsPerYear));
    return p.toFixed(2);

}

function computeBalance(principal, annualRate, years, periodsPerYear, numberOfPaymentsPaidToDate) {
    getValues();
    var r = computePayment(invest, rate, numyear, periods);
    var f = principal * (Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) -
            (r * ((Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) - 1) / (annualRate / periodsPerYear));
    return f.toFixed(2);
}

Also, check the last line on your HTML, I think it should be like:

<button type="button" value="Reset Form" onClick="reset">Reset</button>

Can I use a global variable with getElementById?

2 Answers2