Javascript Error Null is not an Object

Question

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?

This isn't your problem, but I'd recommend using a submit event handler on the form rather than a click event handler on the button. Then it will work if someone presses enter, too. — icktoofay
– icktoofay, Commented Jan 8, 2013 at 4:09

alex · Accepted Answer · 2013-03-29 05:24:40Z

43

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

edited Mar 29, 2013 at 5:24

answered Jan 8, 2013 at 3:49

alex

492k205 gold badges890 silver badges992 bronze badges

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

4 Comments

Mark H Over a year ago

Hi Alex thanks for the quick reply I moved the source. Being new to Javascript could you explain what a DOM ready callback is? But thanks for your answer it helped :)

alex Over a year ago

@MarkH I could, but here is a better explanation.

LaurelS Over a year ago

I'm having this error - I am unclear on this answer. What does Alex mean by 'place the source under the elements in the HTML" ?

LaurelS Over a year ago

When I asked my question about understanding what Alex meant by 'place the source under the elements in the HTML", I had not processed Fiddle's response below. Now I get it.

Munish Poonia · Accepted Answer · 2013-01-08 04:20:18Z

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/

Bryan CS · Accepted Answer · 2013-01-08 03:56:23Z

3

Try loading your javascript after.

Try this:

<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="submit" id="myButton" value="Go" />
</form>

<script src="js/script.js" type="text/javascript"></script>

answered Jan 8, 2013 at 3:56

Bryan CS

6116 silver badges19 bronze badges

Comments

Visal Chhourm · Accepted Answer · 2013-01-08 04:31:08Z

2

I think the error because the elements are undefined ,so you need to add window.onload event which this event will defined your elements when the window is loaded.

window.addEventListener('load',Loaded,false);


    function Loaded(){
    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;
    }
    }

answered Jan 8, 2013 at 4:31

Visal Chhourm

5443 silver badges12 bronze badges

Comments

earlonrails · Accepted Answer · 2013-01-08 04:07:44Z

I agree with alex about making sure the DOM is loaded. I also think that the submit button will trigger a refresh.

This is what I would do

<html>
<head>
<title>webpage</title>
</head>
<script type="text/javascript">
var myButton;
var myTextfield;

function setup() {
  myButton = document.getElementById("myButton");
  myTextfield = document.getElementById("myTextfield");
  myButton.onclick = function() {
    var userName = myTextfield.value;
    greetUser(userName);
    return false;
  }
}

function greetUser(userName) {
  var greeting = "Hello " + userName + "!";
  document.getElementsByTagName("h2")[0].innerHTML = greeting;
}

</script>
<body onload="setup()">
  <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>
  </body>
</html>

have fun!

Collectives™ on Stack Overflow

Javascript Error Null is not an Object

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related