javascript 未捕获的类型错误：无法读取 null index.html:24 的属性“已检查”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18260760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'checked' of null index.html:24
提问by Smulix
I'm newbie in JavaScript, i hope you can help me, as in topic, null property.
我是 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();" />
And them i got message "Uncaught TypeError: Cannot read property 'checked' of null index.html:24 (anonymous function)"
他们我收到消息“未捕获的类型错误：无法读取 null index.html:24（匿名函数）的属性‘已检查’”
Please help me. Greets!
请帮我。问候！
回答by Patrick Evans
Your javascript code is executing before the DOM elements are ready on the page.
在页面上准备好 DOM 元素之前，您的 javascript 代码正在执行。
You need to execute the code that is trying to get the inputs after the DOM is ready.
您需要在 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);
}
回答by spacebread
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.
您还可以使用选中单选按钮的事件来设置您的 add、subs、multi、div 变量。
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.
正如帕特里克·埃文斯所说，你不能在单选按钮被呈现之前寻找你的单选按钮的值（我们可以用 $(document).ready() 或帕特里克埃文斯展示的那样做。但是我们可能不想要查看它们的值，直到用户选择一个或您的按钮被点击。
