javascript - 基本的 HTML 日历搞砸了

Question

这是一个基本的日历项目，我想要按钮来度过几个月。

该按钮适用，console.log因此我的匿名函数一定有问题

const today = new Date();
const calMonth = today.getMonth();
document.querySelector("button").addEventListener("click", event => {calMonth--});

CodePen 的全部内容：
https ://codepen.io/CoCedric/pen/KGNWgy

标签： javascripthtmlcss

Answer 1

单击上一个/下一个按钮的代码仅设置calMonth. 此外，在该注释中，calMonth被声明为 a const，这意味着您无法更改其值。

以下是您可以执行的操作：

1. 更改const为let

2. 将设置 getHead 的 innerHTML 并将日期呈现到函数中的代码包装起来。

   function renderCalendar() {
     getHead.innerHTML = monthFran[calMonth];
     for (let i in allDays) {
       let printedDay = i - calDate.getDay();
       allDays[i].innerHTML = (printedDay < 1 || printedDay > monthEnd[calMonth]) ? "" : printedDay;
     }
   }
   

3. 当您单击 prev/next 按钮以及代码末尾时调用该函数以呈现日期。

   document.querySelectorAll('button').forEach((btn) => {
     btn.addEventListener('click', (e) => {
       if (e.target.classList.contains('bak')) {
         calMonth--;
       } else {
         calMonth++;
       }
   
       renderCalendar();
     });
   });
   
   renderCalendar();
   

当然，该解决方案在任何方面都不是完美/优化的，只是让您知道您可以做什么。