JavaScript: Need Help Ordering My JS "Uncaught TypeError: Cannot Read Property 'value' Of Null"
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""