Question

我想知道为什么会发生此错误“未捕获的TypeError：无法读取属性'的值为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);
        }

Answer 1

在您向DOM添加元素之前，您无法使用.getElementById()搜索该元素。该通话会返回null，这就是错误告诉您的内容。

无论如何，这样做毫无意义，因为您已经拥有直接引用新创建元素的变量。编辑哦等等，我看到你正在尝试做什么。

首先，没有理由在这里使用.setAttribute()。只需在您创建的DOM节点上直接设置属性即可。你必须设置＆＃34; onblur＆＃34;属性到函数：

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

Answer 2

我会尝试解决您的代码中的一些问题（希望它们与您的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);
}

Answer 3

我之前遇到过类似的问题：

"Uncaught TypeError: Cannot read property 'value' of null"

意味着你可能没有设置 id ，以便 找到该值的功能，因此它可以检索它 即可。

示例：

<input type='text' />
<div onclick='myfunc()'></div> 
function myfunc() {
   text = document.getElementById('msg').value;
}

这将返回您获得的以下错误。 正确的方法：

<input type='text' id='msg'/>
<div onclick='myfunc()'></div>      
function myfunc() {
     text = document.getElementById('msg').value;
    }

希望有所帮助！

Answer 4

好吧我正面临同样的问题做一件事，你的javascript文件的脚本选项卡把它放在html的底部，以便html页面中的任何输入都可以被js文件识别，因为javascript会来在你想玩的价值之后

Answer 5

你应该修改这样的功能，让它工作。如果您想使用 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);
 }

或者您可以查看jsfiddle，看看它是如何运作的。

如果元素为null，建议检入上一个答案，但在这种情况下，当您在函数中创建所有元素时不需要它，因此所有元素都将存在。

您还打算如何处理段落元素？也许包装段落中的输入？

如果您愿意，只需添加

即可添加段落

document.body.appendChild(para);

错误：未捕获的TypeError：无法读取null的属性“value”

5 个答案: