0

Hello I am making a calendar, and I have a button to go to the next month by adding +1 to the month that uses a addEventListener but it only works once.

I get the current month, I display it in my table and when I click I add 1 to this value which makes that I pass to the following month as said the code works very well at the time of the first click but after it does not occur anything with the click

My listener and function

function drawcalendar(){
let current_year = document.querySelector('#year');
let current_month = document.querySelector('#month');
let year = date.getFullYear() + y;
let month_c = date.getMonth() + m;
let day = date.getDate();
let moonLanding = new Date(year, month_c, day);



current_year.innerHTML = moonLanding.getFullYear();
current_month.innerHTML =month[moonLanding.getMonth()];

var monthStart = new Date(moonLanding.getFullYear(), moonLanding.getMonth(), 1);
var monthEnd = new Date(moonLanding.getFullYear(), moonLanding.getMonth() + 1, 1);
var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
if (date.getMonth() === moonLanding.getMonth() && moonLanding.getFullYear() === date.getFullYear()){
    var current_day = date.getDate();
}

let week_day = moonLanding.getDay();
table.innerHTML += '<tr class="day">';
let j = 0
if (week_day === 0){
    week_day = 7;
}
for (j ; j < week_day - 1; j++){
    let empty_td = document.createElement('td');
    table.appendChild(empty_td);
    empty_td.classList.add('removercalendar');
}
monthLength = Math.round(monthLength)



for (let i = 0;i < monthLength ; i++){
    let td = document.createElement('td');
    td.classList.add('removercalendar');
    td.innerHTML = i + 1;
    if ((i+1) === current_day){
        td.classList.add('thisday');
    }
    if (i + j === 7 || i +j === 14 || i+j === 21 || i+j === 28 || i+j === 35){
        table.innerHTML += '</tr>' +
            '<tr class="day">';
    }
    table.appendChild(td);
}
table.innerHTML += '</tr>';
}
let y = 0;
let m = 0;
drawcalendar();
let new_date = document.querySelectorAll('.day');

let new_day = document.querySelectorAll('.removercalendar');

document.querySelector('#month_next').addEventListener('click', () => {
    for (let k = 0; k < new_date.length; k++){
        new_date[k].parentNode.removeChild(new_date[k]);
    }
    for (let k = 0; k < new_day.length; k++){
        new_day[k].parentNode.removeChild(new_day[k]);
    }
    m++;
    drawcalendar();
})

HTML

 <tr>

            <th id="month_prev" scope="col" colspan="2"> <i class="fas fa-caret-square-left"></i> </th>
            <th id="month" scope="col" colspan="4">  </th>
            <th id="month_next" scope="col" colspan="2"> <i class="fas fa-caret-square-right"></i> </th>
        </tr>
Fabien Papet
  • 2,244
  • 2
  • 25
  • 52
Envyworen
  • 1
  • Does this answer your question? [add event listener on elements created dynamically](https://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically) – Kinglish Jul 08 '21 at 15:54
  • 1
    because you replace the tables innerHTML, it removes the event – epascarello Jul 08 '21 at 15:55
  • Do you realize that your script has an error right off the bat because it does not define `date`? The first reference that fails is `let year = date.getFullYear() + y;` – Chris Jul 08 '21 at 16:05
  • Whats the +y and +m doing? They are defined outside the function. – Grumpy Jul 08 '21 at 16:21
  • table & date are defined outside the function, I don't regenerate the whole table, only the part with the dates and the column with the month, my add_event listener is not deleted. I have no errors in the console – Envyworen Jul 09 '21 at 08:12

0 Answers0