JavaScript button click event

Question

I am using this js code to create a grid of calendars based on month and year and I want to have a button that will display those calendars.

EDITED

This is my code:

<input type="number" name="a" id="month" />
<input type="number" name="a" id="year" />

<button type="button" class="btn btn-secondary" id ="clickMe">Button</button>

The problem is that when I press the button nothing happens. How can I make the calendars be displayed only on button click?

Answer 1

Most of your methods are wrong especially those for Date. Please see an updated and working sample

(function myFunction() {
    function calendar(month, year) {
 
        var padding = "";
        var totalfeb = "";
        var i = 1;
        var current = new Date();
        var cmonth = current.getMonth();
        var day = current.getDate();
        var tempmonth = month + 1;
        var prevmonth = month - 1;

        if (month == 1) {
            if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
                totalfeb = 29;
            } else {
                totalfeb = 28;
            }
        }

        var monthnames = ["jan", "feb", "march", "april", "may", "june", "july", "aug", "sept", "oct", "nov", "dec"];
        var daynames = ["sunday", "monday", "tuesday", "wednesday", "thrusday", "friday", "saturday"];
        var totaldays = ["31", "" + totalfeb + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];

        var tempdate = new Date(tempmonth + ' 1 ,' + year);
        var tempweekday = tempdate.getDay();
        var tempweekday2 = tempweekday;
        var dayamount = totaldays[month];

        while (tempweekday > 0) {
            padding += "<td class='premonth'></td>";
            tempweekday--;
        }

        while (i <= dayamount) {
            if (tempweekday2 > 6) {
                tempweekday2 = 0;
                padding += "</tr><tr>";
            }

            if (i == day && month == cmonth) {
                padding += "<td class='currentday'  onmouseover='this.style.background=\"#00ff00\"; this.style.color=\"#ffffff\"' onmouseout='this.style.background=\"#ffffff\"; this.style.color=\"#00ff00\"'>" + i + "</td>";
            } else {
                padding += "<td class='currentmonth' onmouseover='this.style.background=\"#00ff00\"' onmouseout='this.style.background=\"#ffffff\"'>" + i + "</td>";

            }

            tempweekday2++;
            i++;
        }

        var calendartable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>" + monthnames[month] + " " + year + "</th></tr>";
        calendartable += "<tr class='weekdays'>  <td>sun</td>  <td>mon</td> <td>tues</td> <td>wed</td> <td>thurs</td> <td>fri</td> <td>sat</td> </tr>";
        calendartable += "<tr>";
        calendartable += padding;
        calendartable += "</tr></table>";
        document.getElementById("calendar").innerHTML += calendartable;

    }

    function displayCalendar() {
        for (i = 0; i < 12; i++) {
            calendar(i, 2020); 
        }
    }

  
    var el = document.getElementById("clickMe");
    if (el.addEventListener)
        el.addEventListener("click", displayCalendar, false);
    else if (el.attachEvent)
        el.attachEvent('onclick', displayCalendar);

})();

<button type="button" class="btn btn-secondary" id ="clickMe">Load Calendar</button>
<div id="calendar"/>