следующие и предыдущие кнопки не работают

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.

Затем ваши функциии 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>