为什么nextButton（）函数没有运行？

Question

我还是新手，并试图建立一个简单的网站，我的功能之一就是日历。

为什么我的函数nextbutton（）没有运行？

我还需要一些评论家在哪里以及我应该在编码方面做些什么改变。非常感谢你！

    function calendar(){    
        date = new Date();
        month = date.getMonth();
        year = date.getFullYear();
        var dayOfweek = date.getDay();      
        var day = date.getDate();
        var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
        var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
        var nextMonth = month+1;
        var prevMonth = month-1;
        var numberOfDays = new Date(year, month, 1).getDay();
        var TotalNumOfDays = new Date(year, month+1, 0).getDate();
        var num2 = numberOfDays+1;
        var num = 1;
        var content = "";

        content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>"; 

        content += "<br/><table><tr>";                  
        for (count=0;count <= nameOftheDays.length-1; count++){

            content += "<td>" + nameOftheDays[count] + "</td>"; 

            if(count === nameOftheDays.length-1){
                content += "</tr><tr>";
            }
        }           
        while (numberOfDays > 0) {  
                content += "<td></td>";
                numberOfDays--;
        }

        while (num <= TotalNumOfDays){
            content += "<td>" + num + "</td>";
            if (num2 > 6) {
                num2 = 0;
                content += "</tr><tr>"
            }
            num2++;
            num++;              
        }   

        document.getElementById("calendar").innerHTML = content;
        document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
        document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");     
        document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
        document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
        document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");

    }
    function nextButton(){
        if(month != null){
            month = month++;
        }
    }

Answer 1

<div id="calendar"></div>

<script language="JavaScript">      
var month=-1;
 function calendar(){  
        date = new Date();
        if(month===-1){
        month =date.getMonth();
        }
        year = date.getFullYear();
        var dayOfweek = date.getDay();      
        var day = date.getDate();
        var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
        var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
        var nextMonth = month+1;
        var prevMonth = month-1;
        var numberOfDays = new Date(year, month, 1).getDay();
        var TotalNumOfDays = new Date(year, month+1, 0).getDate();
        var num2 = numberOfDays+1;
        var num = 1;
        var content = "";

        content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>"; 

        content += "<br/><table><tr>";                  
        for (count=0;count <= nameOftheDays.length-1; count++){

            content += "<td>" + nameOftheDays[count] + "</td>"; 

            if(count === nameOftheDays.length-1){
                content += "</tr><tr>";
            }
        }           
        while (numberOfDays > 0) {  
                content += "<td></td>";
                numberOfDays--;
        }

        while (num <= TotalNumOfDays){
            content += "<td>" + num + "</td>";
            if (num2 > 6) {
                num2 = 0;
                content += "</tr><tr>"
            }
            num2++;
            num++;              
        }   
        document.getElementById("calendar").innerHTML = content;
        document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
        document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");     
        document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
        document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
        document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");

    }
    function nextButton(){
        if(month != null){
document.getElementById("calendar").innerHTML ="";
            month++;
            calendar()
        }
    }
</script>

Answer 2

试一试。我将vars从calendar（）函数中拉出来，并设置你的nextButton（）函数（顺便说一下，只需要一个console.log来查看），每次调用日历函数。另外，要增加，只需执行var ++

＆＃13;

＆＃13;

	var date = new Date();
	var month = date.getMonth();
	var year = date.getFullYear();
  	
	function calendar(month) {
  	
  	var dayOfweek = date.getDay();
  	var day = date.getDate();
  	var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
  	var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
  	var nextMonth = month + 1;
  	var prevMonth = month - 1;
  	var numberOfDays = new Date(year, month, 1).getDay();
  	var TotalNumOfDays = new Date(year, month + 1, 0).getDate();
  	var num2 = numberOfDays + 1;
  	var num = 1;
  	var content = "";
  	content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
  	content += "<br/><table><tr>";
	  	
  	for (count = 0; count <= nameOftheDays.length - 1; count++) {
  		content += "<td>" + nameOftheDays[count] + "</td>";
  		if (count === nameOftheDays.length - 1) {
  			content += "</tr><tr>";
  		}
  	}
  	while (numberOfDays > 0) {
  		content += "<td></td>";
  		numberOfDays--;
  	}
  	while (num <= TotalNumOfDays) {
  		content += "<td>" + num + "</td>";
  		if (num2 > 6) {
  			num2 = 0;
  			content += "</tr><tr>"
  		}
  		num2++;
  		num++;
  	}
  	document.getElementById("calendar").innerHTML = content;
  	document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
  	document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
  	document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
  	document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
  	document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
  }

  function nextButton() {

  	if (month != null) {
  		console.log(month);
  		month++;
  		calendar(month);
  	}
  }
  

＆＃13;

    <body onload="calendar(month)">
        	
    <div id="calendar">
        	 
    </div>
    <div id="today">
    </div>
 
	</body>

＆＃13;

＆＃13;

＆＃13;

Answer 3

nextButton 点击无效，因为它是动态创建的元素。

因此我们需要使用addEventListener。

在新创建的DOM元素上附加点击侦听器

document.getElementsByTagName("button")[1].addEventListener('click', yourFunction);

我使用简单的JS原型来稍微修改代码，这样就可以为日历添加更多方法并拥有多个实例。

＆＃13;

＆＃13;

 function Calendar(month,date,year) { 
        this.month = month, this.date = date, this.year = year;
         this.nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
         this.nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
          
    }
    
    Calendar.prototype.init = function() { 
          this.date = new Date();
          this.month = this.date.getMonth();
          this.year = this.date.getFullYear(); 
          this.render();
        }
        
    Calendar.prototype.render = function() {
          var dayOfweek = this.date.getDay();      
          var day = this.date.getDate();
        
          var nextMonth = this.month+1;
          var prevMonth = this.month-1;
          var numberOfDays = new Date(this.year, this.month, 1).getDay();
          var TotalNumOfDays = new Date(this.year, this.month+1, 0).getDate();
          var num2 = numberOfDays+1;
          var num = 1;
          var content = "";

          content += "<button><----</button><div>" + this.nameOftheMonth[this.month] + " " + this.year + "</div><button>----></button>"; 

          content += "<br/><table><tr>";                  
        for (count=0;count <= this.nameOftheDays.length-1; count++){

          content += "<td>" + this.nameOftheDays[count] + "</td>"; 

          if(count === this.nameOftheDays.length-1){
              content += "</tr><tr>";
          }
        }           
        while (numberOfDays > 0) {  
                content += "<td></td>";
                numberOfDays--;
        }

        while (num <= TotalNumOfDays){
            content += "<td>" + num + "</td>";
            if (num2 > 6) {
                num2 = 0;
                content += "</tr><tr>"
            }
            num2++;
            num++;              
        }   

        document.getElementById("calendar").innerHTML = content;
        document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");    
        document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
        document.getElementsByTagName("button")[0].addEventListener('click', (function() {
          this.prevButton();
        }).bind(this));
        
        document.getElementsByTagName("button")[1].addEventListener('click', (function() {
          this.nextButton();
        }).bind(this));
        
        document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
        }    

    Calendar.prototype.nextButton = function(){
        if(this.month !== null){
            this.month += 1;
            this.render();
        }
    }
    
    Calendar.prototype.prevButton = function(){
        if(this.month !== null){
            this.month -= 1;
            this.render();
        }
    }
    
    var c =new Calendar();
    c.init();
    

＆＃13;

<div id="calendar">

</div>

＆＃13;

＆＃13;

＆＃13;