下一个和上一个按钮不起作用答案

【问题标题】：next and previous buttons don't work下一个和上一个按钮不起作用
【发布时间】：2014-11-24 20:59:03
【问题描述】：

此代码用于制作日历。当我单击下一个按钮时，没有任何反应。我希望当我单击下一个按钮时，页面会在第二个月加载，上一个按钮也是如此。

var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days =  [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var body = document.body;
var counter = 0;

function calendar(){
  for(var i = 1; i<=days[counter]; i++){
    var div = document.createElement("div");
    var calendar1 = document.createTextNode(i);
    div.appendChild(calendar1);
    body.appendChild(div);
  } 
}

function next(){
  counter++;
}

function previous(){
  counter--;
}
calendar(0);

*{
  padding:0;
  border:0;
}
div{
  float:left;
  border: 1px solid black;
  height:100px;
  width:100px;
}

<button onclick="next()">Next</button>
<button onclick="previous()">Previous</button>

【问题讨论】：

您可能需要清除当前日历，然后致电calendar(counter)。可能还有其他工作要做，还有更有效的方法去做。

标签： javascript button

【解决方案1】：

您似乎想在更新counter 后重新绘制日历。

那么，您的next 和previous 函数应该调用calendar。

但请注意calendar 应该在显示更新的日历之前清除当前日历。

var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
    wraper = document.getElementById('calendar'),
    counter = 0;
function calendar(){
  wraper.innerHTML = ''; // Clear current calendar
  for(var i = 1; i<=days[counter]; i++){
    var div = document.createElement("div");
    var calendar1 = document.createTextNode(i);
    div.appendChild(calendar1);
    wraper.appendChild(div);
  } 
}
document.getElementById('next').onclick = function next(){
  ++counter;
  calendar()
};
document.getElementById('prev').onclick = function previous(){
  --counter;
  calendar()
};
calendar();

*{
  padding:0;
  border:0;
}
#calendar > div{
  float:left;
  border: 1px solid black;
  height:100px;
  width:100px;
}

<button id="next">Next</button>
<button id="prev">Previous</button>
<div id="calendar"></div>

【讨论】：