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

Question

i want to know why this error is occuring "Uncaught TypeError: Cannot read property 'value' of null" and where i am going wrong?

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

How should we know? Please see http://css-tricks.com/reduced-test-cases/. — Mark Boulder, Jan 07 '15 at 19:29
It means you are trying to get a property named `value` from a variable that is null. — forgivenson, Jan 07 '15 at 19:30
possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/710446) -- Though I think the misunderstandings present in this question are slightly different from the misunderstandings assumed in that canonical duplicate. — apsillers, Jan 07 '15 at 19:30
you've created your `p` element, but haven't inserted it into the DOM yet, so you can't use `doc.getEleById`, because it's **IN** the document yet. — Marc B, Jan 07 '15 at 19:30
The downvotes are a bit excessive. The question is ok, just the title is bad. — Niels Abildgaard, Jan 07 '15 at 19:39

score 5 · Accepted Answer · answered Jan 07 '15 at 19:29

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.

It's pointless to do that anyway, since you've already got variables that refer directly to your newly-created elements. edit oh 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:

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

I added a line to append the `
` you created to, because if you don't do that there's no point to any of it. — Pointy, Jan 07 '15 at 19:35

score 2 · Answer 2 · answered Jan 07 '15 at 19:34

I'll try to tackle some of the problems with your code (in hope that they magically match your 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);
}

incalite · Answer 3 · 2015-08-19T13:23:03.610

I've encountered a similar problem before:

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

Means that you're probably didn't set an id in order for the function to look for the value, so it can retrieve it.

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!

score 1 · Answer 4 · answered Jan 21 '16 at 14:45

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

ilijamt · Answer 5 · 2015-01-07T19:41:37.493

You should modify the function like so, for it to work. If you want to use setAttribute then you will have to wrap it in a function for the onBlur event

 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.

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

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

5 Answers5

Linked