未捕获的TypeError:无法读取null index.html:24的属性'checked'

Question

我是JavaScript的新手,我希望你可以帮助我,就像在主题,null属性.

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();" />

他们得到消息"未捕获TypeError:无法读取属性'已检查'的null index.html:24(匿名函数)"

请帮我.映入眼帘!

Answer 1

您的javascript代码在DOM元素在页面上准备好之前正在执行.

在DOM准备好之后,您需要执行尝试获取输入的代码.

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