【发布时间】：2020-10-24 12:18:12
【问题描述】：
我使用 HTML 表格元素创建了一个月历。表头，从左到右，包含一个左插入符号、月份和年份，以及一个右插入符号。我正在尝试调用一个 JS 函数，当单击正确的插入符号时，该函数将月份和年份的值更改为下个月。我已经尝试了我在网上找到的所有内容，但该功能无法运行。
这是我调用函数 displayNextMonth() 的 HTML 代码部分。我把脚本放在结束体标签之前。
<table class="table">
<thead>
<tr>
<th><i class="fa fa-caret-left month-caret"></i></th>
<th id="month-header" colspan="5"></th>
<th id="next-month-caret" onclick="displayNextMonth()"><i class="fa fa-caret-right month-caret"></i></th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="calendar-day" id="sun-w1"></td>
<td class="calendar-day" id="mon-w1"></td>
<td class="calendar-day" id="tue-w1"></td>
<td class="calendar-day" id="wed-w1"></td>
<td class="calendar-day" id="thu-w1"></td>
<td class="calendar-day" id="fri-w1"></td>
<td class="calendar-day" id="sat-w1"></td>
</tr>
<tr>
<td class="calendar-day" id="sun-w2"></td>
<td class="calendar-day" id="mon-w2"></td>
<td class="calendar-day" id="tue-w2"></td>
<td class="calendar-day" id="wed-w2"></td>
<td class="calendar-day" id="thu-w2"></td>
<td class="calendar-day" id="fri-w2"></td>
<td class="calendar-day" id="sat-w2"></td>
</tr>
<tr>
<td class="calendar-day" id="sun-w3"></td>
<td class="calendar-day" id="mon-w3"></td>
<td class="calendar-day" id="tue-w3"></td>
<td class="calendar-day" id="wed-w3"></td>
<td class="calendar-day" id="thu-w3"></td>
<td class="calendar-day" id="fri-w3"></td>
<td class="calendar-day" id="sat-w3"></td>
</tr>
<tr>
<td class="calendar-day" id="sun-w4"></td>
<td class="calendar-day" id="mon-w4"></td>
<td class="calendar-day" id="tue-w4"></td>
<td class="calendar-day" id="wed-w4"></td>
<td class="calendar-day" id="thu-w4"></td>
<td class="calendar-day" id="fri-w4"></td>
<td class="calendar-day" id="sat-w4"></td>
</tr>
<tr>
<td class="calendar-day" id="sun-w5"></td>
<td class="calendar-day" id="mon-w5"></td>
<td class="calendar-day" id="tue-w5"></td>
<td class="calendar-day" id="wed-w5"></td>
<td class="calendar-day" id="thu-w5"></td>
<td class="calendar-day" id="fri-w5"></td>
<td class="calendar-day" id="sat-w5"></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="js/calendar.js"></script>
这是我的 JavaScript 代码。
function displayNextMonth()
{
let header = document.getElementById("month-header").innerHTML;
let split = header.split(" ");
let viewYear = ParseInt(split[1]);
let viewMonth = getMonthNum(split[0]);
if(viewMonth === 11)
{
viewYear++;
viewMonth = 0;
}
else
{
viewMonth++;
}
setCalendarMonth(viewYear, viewMonth);
}
function setCalendarMonth(year, month)
{
document.getElementById("month-header").innerHTML = getMonthName(month) + " " + year.toString();
}
我知道在 DisplayNextMonth() 中调用的函数 getMonthNum 有效，所以这不是问题。
【问题讨论】：
-
最好avoid inline handlers，他们现在有太多值得使用的问题，例如疯狂的范围链和引用转义问题。而是使用带有
addEventListener的Javascript 正确附加事件侦听器。
标签： javascript html onclick