JavaScript 按钮点击事件

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"/>