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 css-tricks.com/reduced-test-cases. — Mark Boulder
– Mark Boulder, Commented Jan 7, 2015 at 19:29
It means you are trying to get a property named value from a variable that is null. — forgivenson
– forgivenson, Commented Jan 7, 2015 at 19:30
possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? -- Though I think the misunderstandings present in this question are slightly different from the misunderstandings assumed in that canonical duplicate. — apsillers
– apsillers, Commented Jan 7, 2015 at 19:30
The downvotes are a bit excessive. The question is ok, just the title is bad. — Niels Abildgaard
– Niels Abildgaard, Commented Jan 7, 2015 at 19:39

Pointy · Accepted Answer · 2015-01-07 19:29:29Z

5

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

answered Jan 7, 2015 at 19:29

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pointy Over a year ago

I added a line to append the <p> you created to, because if you don't do that there's no point to any of it.

JCOC611 · Accepted Answer · 2015-01-07 19:34:27Z

2

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

answered Jan 7, 2015 at 19:34

JCOC611

19.8k15 gold badges71 silver badges90 bronze badges

Comments

incalite · Accepted Answer · 2015-08-19 13:23:03Z

1

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!

edited Aug 19, 2015 at 13:23

answered Aug 19, 2015 at 13:17

incalite

3,2273 gold badges29 silver badges32 bronze badges

Comments

maninder singh · Accepted Answer · 2016-01-21 14:45:46Z

1

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

answered Jan 21, 2016 at 14:45

maninder singh

111 bronze badge

Comments

ilijamt · Accepted Answer · 2015-01-07 19:41:37Z

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

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related