javascript - Uncaught TypeError: Cannot read property 'checked' of null index.html:24 - Stack Overflow

admin管理员组

文章数量:1287623

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!

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!

• javascript
• properties
• null

Share Improve this question Follow edited Aug 15, 2013 at 20:06 psmul asked Aug 15, 2013 at 19:59 psmulpsmul 14111 gold badge11 silver badge1313 bronze badges 5

• 2 please post your code here, and only the relevant parts. – Patrick Evans Commented Aug 15, 2013 at 20:01
• done, sorry for problem – psmul Commented Aug 15, 2013 at 20:06
• 1 possible duplicate of Why does jQuery or a DOM method such as `getElementById` not find the element? – Felix Kling Commented Aug 15, 2013 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 Commented Aug 15, 2013 at 20:12
• do not make answers to respond to answers, either click "Add Comment" under the answer and make a ment 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 Commented Aug 15, 2013 at 20:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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);
}

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.

本文标签： javascriptUncaught TypeError Cannot read property 39checked39 of null indexhtml24Stack Overflow