Javascript 错误：未捕获的类型错误：无法读取 null 的属性“值”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27827135/
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
Error: Uncaught TypeError: Cannot read property 'value' of null
提问by Anand Ganesh S S
i want to know why this error is occuring "Uncaught TypeError: Cannot read property 'value' of null" and where i am going wrong?
我想知道为什么会发生此错误“未捕获的类型错误：无法读取 null 的属性‘值’”以及我哪里出错了？
function create()
{
var textbox=document.createElement("input");
var para=document.createElement("p");
para.setAttribute("id","p");
textbox.type='text';
textbox.value='asdf';
textbox.setAttribute("id","textbox");
textbox.setAttribute("onblur",document.getElementById('p').innerHTML=document.getElementById('textbox').value);
document.body.appendChild(textbox);
}
回答by Pointy
Before you've added an element to the DOM, you can't search for it with .getElementById(). That call returns null, and that's what the error is telling you.
在将元素添加到 DOM 之前，您无法使用.getElementById(). 该调用返回null，这就是错误告诉您的内容。
It's pointless to do that anyway, since you've already got variables that refer directly to your newly-created elements. editoh wait, I see what you're trying to do.
无论如何这样做是没有意义的，因为您已经有了直接引用新创建元素的变量。编辑哦等等，我明白你在做什么。
First, there's no reason to use .setAttribute()here. Just set properties directly on the DOM nodes you've created. You have to set the "onblur" property to a function:
首先，没有理由在.setAttribute()这里使用。只需直接在您创建的 DOM 节点上设置属性。您必须将“onblur”属性设置为一个函数：
function create() {
var textbox=document.createElement("input");
var para=document.createElement("p");
para.id = "p";
textbox.type='text';
textbox.value='asdf';
textbox.id = "textbox";
textbox.onblur = function() {
para.innerHTML = textbox.value;
};
document.body.appendChild(textbox);
document.body.appendChild(para);
}
回答by JCOC611
I'll try to tackle some of the problems with your code (in hope that they magically match your HTML):
我将尝试解决您的代码中的一些问题（希望它们神奇地匹配您的 HTML）：
function create(){
var textbox = document.createElement("input");
var para = document.createElement("p");
para.setAttribute("id", "p");
textbox.type = 'text';
textbox.value='asdf';
textbox.setAttribute("id","textbox");
// The following is a valid way to attach an event handler:
textbox.onblur = function(){
para.innerHTML = document.getElementById('textbox').value);
}
document.body.appendChild(textbox);
}
回答by atlas
I've encountered a similar problem before:
我之前也遇到过类似的问题：
"Uncaught TypeError: Cannot read property 'value' of null"
"Uncaught TypeError: Cannot read property 'value' of null"
Means that you're probably didn't set an idin order for the function to look for the value, so it can retrieve it.
意味着您可能没有设置id以便函数查找值，因此它可以检索它。
Example:
例子：
<input type='text' />
<div onclick='myfunc()'></div>
function myfunc() {
text = document.getElementById('msg').value;
}
This will return the following error you get. Correct approach:
这将返回您得到的以下错误。 正确做法：
<input type='text' id='msg'/>
<div onclick='myfunc()'></div>
function myfunc() {
text = document.getElementById('msg').value;
}
Hope that helps!
希望有帮助！
回答by maninder singh
ok i was facing the same problem do one thing,the script tab for your javascript file put it at the bottom of the html so that any input in html page comes, can be recognized by the js file ,because javascript will come after the value you want to play with
好的，我遇到了同样的问题，做一件事，你的 javascript 文件的脚本选项卡把它放在 html 的底部，这样 html 页面中的任何输入都可以被 js 文件识别，因为 javascript 会出现在值之后你想玩
回答by ilijamt
You should modify the function like so, for it to work. If you want to use setAttributethen you will have to wrap it in a function for the onBlurevent
你应该像这样修改函数，让它工作。如果要使用setAttribute，则必须将其包装在onBlur事件的函数中
function create() {
var textbox = document.createElement("input");
var para = document.createElement("p");
para.setAttribute("id", "p");
textbox.type = 'text';
textbox.value = 'asdf';
textbox.setAttribute("id", "textbox");
textbox.setAttribute("onblur", function() {
para.innerHTML = textbox.value;
});
document.body.appendChild(textbox);
}
Or you can checkout the jsfiddle, to see how it works.
或者你可以查看jsfiddle，看看它是如何工作的。
It was recommended to check in a previous answer, if the element is null, but in this case it's not needed as you are creating all the elements in the functions, so all elements will exist.
建议检查之前的答案，如果元素为空，但在这种情况下，不需要它，因为您正在创建函数中的所有元素，因此所有元素都将存在。
Also what do you plan to do with the paragraph element? Maybe wrap the input in the paragraph?
另外你打算如何处理段落元素？也许将输入包裹在段落中？
If you want you can add the paragraph simply by adding
如果你愿意，你可以简单地添加段落
document.body.appendChild(para);
