下一個和上一個按鈕不起作用

Question

此代碼用於製作日曆。當我點擊下一個按鈕時沒有任何反應。我希望當我點擊下一個按鈕時，頁面會加載第二個月，而前一個按鈕也是一樣。

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>

Answer 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>