JavaScript getElementById always returning null

Question

I am trying to build a simple budget calculator, everytime I click my submit button I nothing happens. When I try to check my variable values in the console they show null, even after I have typed values in my input boxes. Can anyone tell me what I'm doing wrong? After looking through other questions on here I haven't been able to find an answer that relates to my issue.

<!DOCTYPE html>
<html>

<head>
    <title>Budget Calculator</title>
    <style>
        input {display:block;}
        #clear {float:left;}
        #submit {float:left;}
    </style>
    <script type="text/javascript">
        var kms = document.getElementById("kmTravelled");
        var rent = document.getElementById("rentPerMonth");
        var carCost = document.getElementById("carPayment");
        var costPerTrip = (kms/12.75)*20;
        var total = Math.round((costPerTrip + rent + carCost)*100)/100;

        function calculate()
        {
            document.getElementById("calculator").innerHTML = total;
        }
    </script>
</head>
<body>


    <form id="myForm")>
        Km travelled per day: <input type="number" name="kmTravelled" />
        Rent per month: <input type="number" name="rentPerMonth" />
        Car payment per month: <input type="number" name="carPayment" />
    </form>
    <button id="submit" type="button" onclick="calculate();">
        Submit
    </button>
    <button id="clear" type="clear">
        Clear
    </button>

    <p id = "calculator">
    </p>

    <script>
        calculate();
    </script>

</body>

just a small hint: <form id="myForm")> you have a closing parenthesis to much. — Nina Scholz
– Nina Scholz, Commented Feb 18, 2017 at 19:24

Nina Scholz · Accepted Answer · 2017-02-18 18:39:09Z

I suggest to use id attributes and move the parts for getting the values inside of the function, as well as getting value property and cast the string value to number for calculation.

function calculate() {
    var kms = +document.getElementById("kmTravelled").value;
    var rent = +document.getElementById("rentPerMonth").value;
    var carCost = +document.getElementById("carPayment").value;
    var costPerTrip = (kms / 12.75) * 20;
    var total = Math.round((costPerTrip + rent + carCost) * 100) / 100;

  document.getElementById("calculator").innerHTML = total;
}

input { display: block; }
#clear { float: left; }
#submit { float: left; }

<form id="myForm">
  Km travelled per day: <input type="number" name="kmTravelled" id="kmTravelled"/> Rent per month: <input type="number" name="rentPerMonth" id="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" id="carPayment" />
</form>
<button id="submit" type="button" onclick="calculate();">Submit</button>
<button id="clear" type="clear">Clear</button>
<p id="calculator"></p>

Zakaria Acharki · Accepted Answer · 2017-02-18 18:40:28Z

2

You don't have no id's in you input's but you have name's instead so you could use name selector $('[name=""]') like :

var kms = document.querySelector("[name='kmTravelled']").value;
var rent = document.querySelector("[name='rentPerMonth']").value;
var carCost = document.querySelector("[name='carPayment']").value;

If you want really to use id's , just add them and the JS code could be :

var kms = document.querySelector("#kmTravelled").value;
var rent = document.querySelector("#rentPerMonth").value;
var carCost = document.querySelector("#carPayment").value;

NOTE : You should get just the value of the element not the whole object.

Hope this helps.

var kms = document.querySelector("[name='kmTravelled']").value;
var rent = document.querySelector("[name='rentPerMonth']").value;
var carCost = document.querySelector("[name='carPayment']").value;
var costPerTrip = (kms/12.75)*20;
var total = Math.round((costPerTrip + rent + carCost)*100)/100;

function calculate()
{
  document.getElementById("calculator").innerHTML = total;
}

calculate();

input {
  display:block;
}

#clear {
  float:left;
}

#submit {
  float:left;
}

<form id="myForm")>
    Km travelled per day: <input type="number" name="kmTravelled" />
    Rent per month: <input type="number" name="rentPerMonth" />
    Car payment per month: <input type="number" name="carPayment" />
</form>

<button id="submit" type="button" onclick="calculate();">
    Submit
</button>

<button id="clear" type="clear">
    Clear
</button>

<p id = "calculator"></p>

edited Feb 18, 2017 at 18:40

answered Feb 18, 2017 at 18:34

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

3 Comments

Gerrit0 Over a year ago

This would still break as the elements don't exist when the script caching the elements runs.

Reg Smith Over a year ago

That actually helped. I'm not this basic at js, just made a simple mistake in putting name instead of id. '-_- Thanks for pointing out my error!

Zakaria Acharki Over a year ago

Check my update please. No worries @RegSmith have happen to all of us ;)

user7212768 · Accepted Answer · 2017-02-18 18:37:56Z

0

I think you need to try getElementById('kmTravelled').

answered Feb 18, 2017 at 18:37

user7212768

Comments

mim · Accepted Answer · 2017-02-18 19:08:30Z

0

First, you have to give proper id in HTML tag. check your HTML tag, convert those name into id. Now you have to slightly change your javascript code, if you look at your code you didn't assign any value to your variable. fix these problems and your code will run properly.

answered Feb 18, 2017 at 19:08

mim

411 silver badge8 bronze badges

Collectives™ on Stack Overflow

JavaScript getElementById always returning null

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related