Uncaught TypeError: Cannot read property 'checked' of null index.html:24

Question

I'm newbie in JavaScript, i hope you can help me, as in topic, null property.

var add = document.getElementById('addition').checked;
var subs = document.getElementById('substraction').checked;
var multi = document.getElementById('multiplication').checked;
var div = document.getElementById('division').checked;

var result = 0;
    var x = parseInt(document.getElementById('firstNumber').value);
    var y = parseInt(document.getElementById('secondNumber').value);

function calculator() 
{
    if (add)
    {
        result = addition(x, y);
    }
    else if (subs)
    {
        result = substraction(x, y);
    }
    else if (multi)
    {
        result = multiplication(x, y);
    }
    else if (division)
    {
        result = division(x, y);
    };
}


<fieldset>
    <legend>Method</legend>
    <p><label><input type="radio" name="method" id="addition" />Addition</label></p>
    <p><label><input type="radio" name="method" id="substraction" />Substraction</label></p>
    <p><label><input type="radio" name="method" id="multiplication" />Multiplication</label></p>
    <p><label><input type="radio" name="method" id="division" />Division</label></p>
</fieldset>

<input type="submit" value="Submit" onclick="calculator();" />

And them i got message "Uncaught TypeError: Cannot read property 'checked' of null index.html:24 (anonymous function)"

Please help me. Greets!

possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Aug 15 '13 at 20:09
Thanks for your respond but when i type code in my page i get even more errors. Uncaught TypeError: Cannot read property 'value' of null index.html:39 domReady index.html:39 Uncaught ReferenceError: add is not defined index.html:44 calculator index.html:44 onclick — psmul, Aug 15 '13 at 20:12
do not make answers to respond to answers, either click "Add Comment" under the answer and make a comment or reedit your question to show the changes and the new errors. But you are getting those errors because you are checking for "add","subs",etc inside a function where they do not exist, if you need to check those you need to make `calculator` to have those arguments in the function definition and pass them when you call calculator. Also you are trying to get an input element by an id but you have their ids as values for instance you have `value="secondNumber"` should be `id="secondNumber"` — Patrick Evans, Aug 15 '13 at 20:39

score 6 · Accepted Answer · answered Aug 15 '13 at 20:06

Your javascript code is executing before the DOM elements are ready on the page.

You need to execute the code that is trying to get the inputs after the DOM is ready.

(function () {
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', domReady, false);
    } else {
        window.attachEvent('onload', domReady);
    }
} ());

function domReady() {
    var add = document.getElementById('addition').checked;
    var subs = document.getElementById('substraction').checked;
    var multi = document.getElementById('multiplication').checked;
    var div = document.getElementById('division').checked;

    var result = 0;
    var x = parseInt(document.getElementById('firstNumber').value);
    var y = parseInt(document.getElementById('secondNumber').value);
}

spacebread · Answer 2 · 2013-08-15T20:47:57.100

It seems like there are several issues going on here. There is probably more code somewhere? or more to be added. Anyways, I would go ahead and declare your variables when your function is actually called.

    function calculator() {
        var add = document.getElementById('addition').checked;
        var subs = document.getElementById('substraction').checked;
        var multi = document.getElementById('multiplication').checked;
        var div = document.getElementById('division').checked;

        var result = 0;
        var x = parseInt(document.getElementById('firstNumber').value);
        var y = parseInt(document.getElementById('secondNumber').value);

        if (add) {
            result = x + y;
        }
        else if (subs) {
            result = x - y;
        }
        else if (multi) {
            result = x * y;
        }
        else if (division) {
            result = x / y;
            alert("division");
        }


    }

I don't know if you are planning on using another method for division but if you want to divide the two numbers if the radio button of division was selected you'd just use /.

You could also use the event of a radio button being checked to set your add, subs, multi, div variables.

As Patrick Evans stated, you can't look for the value of your radio button before the radio buttons have been rendered (which we could do with $(document).ready() or as Patrick Evans showed. HOWEVER we probably do not want to look at their values until either the user selects one or your button is clicked.

Uncaught TypeError: Cannot read property 'checked' of null index.html:24

2 Answers2

Linked