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     lt h2 gt Hello World  lt  h2 gt   lt p id  myParagraph  gt This is an example website lt  p gt    lt script src  js script js  type  text javascript  gt  lt  script gt    lt form gt     lt input type  text  id  myTextfield  placeholder  Type your name    gt     lt input type  submit  id  myButton  value  Go    gt   lt  form gt    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

User · Answer

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

User · Answer

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   lt html gt   lt head gt   lt title gt webpage lt  title gt   lt  head gt   lt script type  text javascript  gt  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      lt  script gt   lt body onload  setup    gt     lt h2 gt Hello World  lt  h2 gt     lt p id  myParagraph  gt This is an example website lt  p gt      lt form gt       lt input type  text  id  myTextfield  placeholder  Type your name    gt       lt input type  button  id  myButton  value  Go    gt     lt  form gt     lt  body gt   lt  html gt    have fun

User · Answer

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

User · Answer

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    lt script gt    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                  lt  script gt   lt h2 gt Hello World  lt  h2 gt   lt p id  myParagraph  gt This is an example website lt  p gt    lt form gt     lt input type  text  id  myTextfield  placeholder  Type your name    gt     lt input type  button  id  myButton  value  Go    gt   lt  form gt    Fiddle at - http   jsfiddle net poonia qQMEg 4

User · Answer

Try loading your javascript after   Try this    lt h2 gt Hello World  lt  h2 gt   lt p id  myParagraph  gt This is an example website lt  p gt    lt form gt     lt input type  text  id  myTextfield  placeholder  Type your name    gt     lt input type  submit  id  myButton  value  Go    gt   lt  form gt    lt script src  js script js  type  text javascript  gt  lt  script gt

[javascript] Javascript Error Null is not an Object

Examples related to javascript

Examples related to html