Javascript addeventlistener不'；I don’我没有按预期工作

我已将代码放在底部的代码笔上；，谢谢大家!

我写了一个javascript日历，但当我使用addEventListener时，它会导致一些问题， 这是代码，谢谢你的帮助

  document.addEventListener('DOMContentLoaded', function(){
var today = new Date(),
    year = today.getFullYear(),
    month = today.getMonth(),
    monthTag =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
    day = today.getDate();

function Calendar(selector) {
    this.el = document.getElementById(selector);
    this.draw();
}

Calendar.prototype.draw  = function() {
    var that = this,
        reset = document.getElementById('reset'),
        pre = document.getElementsByClassName('pre-button'),
        next = document.getElementsByClassName('next-button');

        pre[0].addEventListener('click', function(){that.preMonth(); });
        next[0].addEventListener('click', function(){that.nextMonth(); });
        reset.addEventListener('click', function(){that.reset(); });
    this.drawHeader();
    this.drawDays();
};

Calendar.prototype.drawHeader = function() {
    var headDay = document.getElementsByClassName('head-day'),
        headMonth = document.getElementsByClassName('head-month');

        headDay[0].innerHTML = day;
        headMonth[0].innerHTML = monthTag[month] +" - " + year;

    console.log('hello')
 };

Calendar.prototype.drawDays = function() {
    var days = document.getElementsByTagName('td'),
        startDay = new Date(year, month, 1).getDay(),
        nDays = new Date(year, month + 1, 0).getDate(),
        n = startDay;
    for(var k = 0; k <42; k++) {
        days[k].innerHTML = '';
        days[k].className = '';
    }
    for(var i  = 1; i <= nDays ; i++) {
        days[n].innerHTML = i; 
        n++;
    }
    for(var j = 0; j < 42; j++) {
        if(days[j].innerHTML === ""){
            days[j].className = "disabled";
            a = j;
        }
        if((j === day + a)&&((month===today.getMonth())&&(year===today.getFullYear()))){
            days[j].className = "today";
        }
    }
};

Calendar.prototype.preMonth = function() {
    if(month < 1){ 
        month = 11;
        year = year - 1; 
    }else{
        month = month - 1;
    }
    current = false;
    this.drawHeader();
    this.drawDays();
};

Calendar.prototype.nextMonth = function() {
    if(month >= 11){
        month = 0;
        year =  year + 1; 
    }else{
        month = month + 1;
    }
    this.draw();
}; 

 Calendar.prototype.reset = function() {
     month = today.getMonth();
     year = today.getFullYear();
     this.draw();
 }

var calendar = new Calendar('#calendar');
}, false);

document.addEventListener（'DOMContentLoaded'，function（）{
var today=新日期（），
年=今天。getFullYear（），
月份=今天。getMonth（），
月=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
day=今天。getDate（）；
功能日历（选择器）{
this.el=document.getElementById（选择器）；
这个.draw（）；
}
Calendar.prototype.draw=函数（）{
var=这个，
reset=document.getElementById（'reset'），
pre=document.getElementsByClassName（'pre-button'），
next=document.getElementsByCassName（'next-button'）；
pre[0]。addEventListener（'click'，function（）{that.preMonth（）；}）；
下一步[0]。addEventListener（'click'，function（）{that.nextMonth（）；}）；
reset.addEventListener（'click'，function（）{that.reset（）；}）；
这个.drawHeader（）；
这个.drawDays（）；
};
Calendar.prototype.drawHeader=函数（）{
var headDay=document.getElementsByClassName（'head-day'），
headMonth=document.getElementsByClassName（“head-month”）；
headDay[0]。innerHTML=day；
人头月[0]。innerHTML=monthTag[month]+“-”+年；
console.log（'hello'）
};
Calendar.prototype.drawDays=函数（）{
var days=document.getElementsByTagName（'td'），
startDay=新日期（年、月、1）。getDay（），
nDays=新日期（年、月+1,0）。getDate（），
n=开始日期；
对于（var k=0；k每次单击上一个/下一个按钮都会添加新的事件处理程序。事件处理程序调用
draw
，它会再次绑定事件处理程序。因此，在第二次单击下一个按钮后，您将执行两次
month=month+1

解决方案：在创建日历时只绑定事件处理程序一次。
您能给我们一些关于它如何“工作错误”的详细信息吗？您得到了什么输出？其他两个方法是在哪里定义的？“如您所见，preMonth（）工作正确”如果我不能运行代码，我该怎么看呢？旁注——像这样的代码就是为什么创建jQuery“日期显示不符合预期！”再次：你期望什么，你得到什么结果？如果我们不知道你期望什么，我们怎么知道我们看到的不是你期望的？再次，非常感谢。我只学了2个月的javascript，所以我不理解事件处理程序；也许我应该读更多关于它的内容！无论你做了什么，都做得很好！抱歉我的表达不好首先，这可能有助于更好地理解事件处理程序：