How to Fix "Uncaught TypeError: month is null" in JavaScript

Question

I'm working on creating a calendar for an html page but this is the error I get for my month and then the same with the year. I tried the window.onload but it did not work.

Uncaught TypeError: month is null
    <anonymous> website address:197
    EventListener.handleEvent* website address:184

Below is the full code for this function:

list : function () {
    //BASIC CALCULATIONS - DAYS IN MONTH, START + END DAY
    cal.sMth = parseInt(document.getElementById("cal-mth").value); // selected month
    cal.sYear = parseInt(document.getElementById("cal-yr").value); // selected year
    var daysInMth = new Date(cal.sYear, cal.sMth+1, 0).getDate(), // number of days in selected month
        startDay = new Date(cal.sYear, cal.sMth, 1).getDay(), // first day of the month
        endDay = new Date(cal.sYear, cal.sMth, daysInMth).getDay(); // last day of the month

//LOAD DATA FROM LOCALSTORAGE
cal.data = localStorage.getItem("cal-" + cal.sMth + "-" + cal.sYear);
    if (cal.data==null) {
      localStorage.setItem("cal-" + cal.sMth + "-" + cal.sYear, "{}");
      cal.data = {};
    } else {
      cal.data = JSON.parse(cal.data);
    }

//MONTH & YEAR SELECTOR
window.addEventListener("load", function () { //184

  var now = new Date(),
      nowMth = now.getMonth(),
      nowYear = parseInt(now.getFullYear());


  var month = document.getElementById("cal-mth");
  for (var i = 0; i < 12; i++) {
    var opt = document.createElement("option");
    opt.value = i;
    opt.innerHTML = cal.mName[i];
    if (i==nowMth) { opt.selected = true; }
    month.appendChild(opt); //197
  }

  //window.onload=function(){
  var year = document.getElementById("cal-yr");
  for (var i = nowYear-10; i<=nowYear+10; i++) { // Set to 10 years for range
    var opt = document.createElement("option");
    opt.value = i;
    opt.innerHTML = i;
    if (i==nowYear) { opt.selected = true; }
    year.appendChild(opt);
  }

  
  //window.onload=function(){
  document.getElementById("cal-set").addEventListener("click", cal.list);
  cal.list();
});

This here includes the relevant code. It also includes the markers for where in the html code its calling too. Also its telling me to add more details and im not exactly sure how to get rid of that while keeping all the code in here...?

@ozgur is there a way i can add it in here without taking up the entire page? — CluelessCman, Nov 07 '20 at 21:45
Do you actually have a single element with the id "cal-mth"? — HardlyNoticeable, Nov 07 '20 at 21:46
you can try to add only the relevant section of your html where you define the element with the id cal-mth — Ozgur Sar, Nov 07 '20 at 21:46
`var month = document.getElementById("cal-mth");` this is returning null in your case so make sure you have written the id correctly, or even that the element exists at the moment you try to select it — SaymoinSam, Nov 07 '20 at 21:47
are you running this script after cal-mth element is actually loaded onto the DOM? — Ozgur Sar, Nov 07 '20 at 21:48
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Nov 07 '20 at 21:55
@CluelessCman as we can't see the html code and where your script is actually run it is hard to suggest an answer. Please check the link epascarello added above. Your script might be running before the DOM is loaded. — Ozgur Sar, Nov 07 '20 at 22:05

How to Fix "Uncaught TypeError: month is null" in JavaScript

0 Answers0