Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript Error Null is not an Object

Tags:

Im getting a error in the Web Inspector as shown below:

TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() { var userName = myTextfield.value; greetUser(userName);  return false;  }') 

Here is my Code (HTML):

<h2>Hello World!</h2> <p id="myParagraph">This is an example website</p>  <script src="js/script.js" type="text/javascript"></script>  <form>   <input type="text" id="myTextfield" placeholder="Type your name" />   <input type="submit" id="myButton" value="Go" /> </form> 

Here is the JS:

var myButton = document.getElementById("myButton"); var myTextfield = document.getElementById("myTextfield");  function greetUser(userName) { var greeting = "Hello " + userName + "!"; document.getElementsByTagName ("h2")[0].innerHTML = greeting; }  myButton.onclick = function() { var userName = myTextfield.value; greetUser(userName);  return false;  } 

Any Idea why I am getting the error?

like image 566
Mark H Avatar asked Jan 08 '13 03:01

Mark H


People also ask

Is null a object in JavaScript?

The value null represents the intentional absence of any object value. It is one of JavaScript's primitive values and is treated as falsy for boolean operations.

What is a non null object?

The nonNull method is a static method of the Objects class in Java that checks whether the input object reference supplied to it is non-null or not. If the passed object is non-null, then the method returns true. If the passed object is null , then the method returns false.

Is not a function JS error?

This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.

What does undefined is not an object mean?

Javascript TypeError: undefined is not an object that means you're trying to treat undefined value as an Object . ( simply: trying to get data from undefined value)


2 Answers

Put the code so it executes after the elements are defined, either with a DOM ready callback or place the source under the elements in the HTML.

document.getElementById() returns null if the element couldn't be found. Property assignment can only occur on objects. null is not an object (contrary to what typeof says).

like image 56
alex Avatar answered Oct 15 '22 03:10

alex


Any JS code which executes and deals with DOM elements should execute after the DOM elements have been created. JS code is interpreted from top to down as layed out in the HTML. So, if there is a tag before the DOM elements, the JS code within script tag will execute as the browser parses the HTML page.

So, in your case, you can put your DOM interacting code inside a function so that only function is defined but not executed.

Then you can add an event listener for document load to execute the function.

That will give you something like:

<script>   function init() {     var myButton = document.getElementById("myButton");     var myTextfield = document.getElementById("myTextfield");     myButton.onclick = function() {       var userName = myTextfield.value;       greetUser(userName);     }   }    function greetUser(userName) {     var greeting = "Hello " + userName + "!";     document.getElementsByTagName ("h2")[0].innerHTML = greeting;   }    document.addEventListener('readystatechange', function() {     if (document.readyState === "complete") {       init();     }   });  </script> <h2>Hello World!</h2> <p id="myParagraph">This is an example website</p>  <form>   <input type="text" id="myTextfield" placeholder="Type your name" />   <input type="button" id="myButton" value="Go" /> </form> 

Fiddle at - http://jsfiddle.net/poonia/qQMEg/4/

like image 36
Munish Poonia Avatar answered Oct 15 '22 03:10

Munish Poonia