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


        

Answer 1

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

Answer 2

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!

Answer 3

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

Answer 4

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

Answer 5

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