Uncaught TypeError Cannot read property value of null

Question

I m getting error in this code  I m trying to do an event where in when the page is load  it will do the event  But the problem is when I go to other function  but same page  it gets a error of null on that variable  It has no problem when I execute this codes  but when I m on other part of my codes this error occurs    Uncaught TypeError  Cannot read property  value  of null      document  ready function            var str   document getElementById  cal preview   value        var str1   document getElementById  year   value        var str2   document getElementById  holiday   value        var str3   document getElementById  cal option   value            if  str      amp  amp  str1      amp  amp  str2      amp  amp  str3                               document getElementById  calendar preview   innerHTML                   return                           if  window XMLHttpRequest                code for IE7   Firefox  Chrome  Opera  Safari             xmlhttp new XMLHttpRequest                          else               code for IE6  IE5             xmlhttp new ActiveXObject  Microsoft XMLHTTP                           xmlhttp onreadystatechange function                           if  xmlhttp readyState  4  amp  amp  xmlhttp status  200                                  document getElementById  calendar preview   innerHTML xmlhttp responseText                                       var url   calendar preview vars plugin url     id     str    amp    y   str1   amp    h   str2   amp    opt   str3          xmlhttp open  GET  url true           xmlhttp send

User · Answer

Add a check   if  document getElementById  cal preview      null        str   document getElementById  cal preview   value

User · Answer

My mistake was that I was keeping the Javascript file   tag  above the html declaration   It worked by placing the js script tag at the bottom of the body inside the body   I did not the script on load of the page

User · Answer

Easier and more succinct with            document  ready function        var str     document getElementById  cal preview        value         var str1     document getElementById  year        value         var str2     document getElementById  holiday        value         var str3     document getElementById  cal option        value             if  str      amp  amp  str1      amp  amp  str2      amp  amp  str3                       document getElementById  calendar preview   innerHTML               return                   if  window XMLHttpRequest            code for IE7   Firefox  Chrome  Opera  Safari         xmlhttp new XMLHttpRequest                  else           code for IE6  IE5         xmlhttp new ActiveXObject  Microsoft XMLHTTP                   xmlhttp onreadystatechange function                   if  xmlhttp readyState  4  amp  amp  xmlhttp status  200                          document getElementById  calendar preview   innerHTML xmlhttp responseText                           var url   calendar preview vars plugin url     id     str    amp    y   str1   amp    h   str2   amp    opt   str3      xmlhttp open  GET  url true       xmlhttp send

User · Answer

I am unsure which of them is wrong because you did not provide your HTML  but one of these does not exist   var str   document getElementById  cal preview   value  var str1   document getElementById  year   value  var str2   document getElementById  holiday   value  var str3   document getElementById  cal option   value    There is either no element with the id cal preview  year  holiday  cal option  or some combination   Therefore  JavaScript is unable to read the value of something that does not exist   EDIT   If you want to check that the element exists first  you could use an if statement for each   var str  element   document getElementById  cal preview    if  element    null        str   element value    else       str   null      You could obviously change the else statement if you want or have no else statement at all  but that is all about preference

User · Answer

Instead of document or   document  to avoid JQuery  you can add a TimeOut to validate the objects  TimeOut is executed after loading all objects within the page and other events     setTimeout function        var str   document getElementById  cal preview   value  var str1   document getElementById  year   value                     0

User · Answer

If in your HTML you have an input element with a name or id with a   like e g  first name or more than one   like e g  student first name and you also have the Javascript code at the bottom of your Web Page and you are sure you are doing everything else right  then those dashes could be what is messing you up   Having id or name for your input elements resembling the below   lt input type  text  id  first name  name  first name  gt    or    lt input type  text  id  student first name  name  student first name  gt    Then you try make a call like this below in your JavaScript code  var first name   document getElementById  first name   value    or   var student first name   document getElementById  student first name   value    You are certainly going to have an error like Uncaught TypeError  Cannot read property  value  of null in Google Chrome and on Internet Explorer too  I did not get to test that with Firefox    In my case I removed the dashes  in first name and renamed it to firstname and from student first name to studentfirstname  At the end  I was able to resolve that error with my code now looking as follows for HTML and JavaScript   HTML   lt input type  text  id  firstname  name  firstname  gt    or    lt input type  text  id  studentfirstname  name  studentfirstname  gt    Javascript  var firstname   document getElementById  firstname   value    or   var studentfirstname   document getElementById  studentfirstname   value    So if it is within your means to rename the HTML and JavaScript code with those dashes  it may help if that is what is ailing your piece of code  In my case that was what was bugging me    Hope this helps someone stop pulling their hair like I was

User · Answer

HTML   Pass the whole body inside on click  div class  calculate  id  calculate  gt               lt div class  button  id  button  onclick  myCode this body   gt  CALCULATE    lt  div gt           lt  div gt    Then write the JavaScript code inside the function  myCode     function myCode         var bill   document getElementById  currency   value        var people count   document getElementById  number1   value      var select value   document getElementById  select   value       var calculate   document getElementById  calculate         calculate addEventListener  click   function                 console log bill           console log people count           console log select value               you will get your values I am using visual studio code editor

User · Answer

add  MainContent   to ID value   Example   Error   document getElementById  Password   value   text     ok    document getElementById    MainContent   Password   value   text

[javascript] Uncaught TypeError: Cannot read property 'value' of null

Examples related to javascript