Skip to content Skip to sidebar Skip to footer
Home / Dom / Html / Javascript / Typeerror

JavaScript: Need Help Ordering My JS "Uncaught TypeError: Cannot Read Property 'value' Of Null"

Post a Comment
I am an amateur JS person so be kind with your voting as I am new to this. I am getting Uncaught TypeError: Cannot read property 'value' of null. I realize the issue is with the

Solution 1:

put this line:

var todoInput  = document.getElementById("todoItem");

into the function insert

when the var todoInput is init the element not exists.

function insert() {
  var todoInput  = document.getElementById("todoItem");
  todos.push(todoInput.value);

  clearAndShow();
}

to clear input write this code

document.getElementById("todoItem").value='';

Solution 2:

The best investment of time you can make is to Read and Understand error messages.

A typical or a common error message in Javascript would be like:

Uncaught TypeError: undefined is not a function

Looking at the first part: Uncaught TypeError. Uncaught means the error was not caught in a catch statement, and TypeError is the error’s name.

Looking at the second part, which is more useful than the first part. It is read literally and clearly says, it tried to use undefined as a function.

Example:

var x = undefined; // 'undefined' is a type in JS
x(); // This is what JS tried to do and said 'Hey! x is undefined. I can't execute it like a function.'

In your case, the second part of the error reads: Cannot read property 'value' of null.

Visualize this literally. Some context on property.

var person = {
  'name': 'Joe',
  'age': 10
};

Now, person is the object and name and age are the properties of the person object.

Now if you execute person.name JS can execute it because person has a property called name.

But, if you execute monster.name, JS tries to lookup monster object. But we don't have monster object in our code anywhere. So now JS will throw:

Uncaught ReferenceError: monster is not defined.

Try to analyze the two parts: Uncaught ReferenceError. JS tried to search or refer an object that is not found. Therefore it is ReferenceError.

In your case, the DOM is not yet ready when you try to get todoItem and hence JS can't find it. So it should be a ReferenceErrror.
But document.getElementById() which is the DOM an implementation of ES that searches and modifies the html nodes in your markup, will return a null object when it cant find something.

null is an object in JS. Just like person is an object that we declared earlier.

Now your variable todoInput will receive the null object from document.getElementById() and tries to search for value property in null object. And it promptly says in the second part of your error "Hey! I cant read property value from the null object"


Solution 3:

You never know your document is loaded if you create variables on fly. Better way is use jquery document.ready if your are using jquery there

$(document).ready(function(){
//javascript code goes here
)};

OR try your code with these modifications

    <title></title>
    </head>
    <body>
      <form>
        <input id="todoItem" type="text" placeholder="Todo Item" />
        <input type="button" value="Save" onclick="insert();" />
      </form>
      <div id="display"></div>
    </body>

    <script>

    var todos  = [];





    function insert() {
var todoInput  = document.getElementById("todoItem");
     todos.push(todoInput.value);

     clearAndShow();
    }

    function clearAndShow() {
    var messageBox  = document.getElementById("display");
      todoInput.value = "";

      messageBox.innerHTML = "";

      messageBox.innerHTML += "Titles: " + todos.join(", ") + "<br/>";
    }
</script>

Post a Comment for "JavaScript: Need Help Ordering My JS "Uncaught TypeError: Cannot Read Property 'value' Of Null""