Uncaught TypeError: Cannot read property 'chec

问题:

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!

回答1:

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

回答2:

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.