Data output by clicking on calendar cell

Question

I am trying to develop an calendar with pure JavaScript.

There is table 7x7 in HTML including a title string of weekdays. Filling up the cells with data is working properly.

But I need to achieve message appearence with chosen date by double click. But now the same date occurs every time (29.01.2018) - exactly on this date table filling has finished.

var local_date;
function calendarFill(){  
    local_date = new Date(); 
    var week_day = local_date.getDay();

    var i;  // defines which line to fill from
    var j;  //defines which column to fill in current month from
    var k;  //defines which column to fill in previous month from
    if(week_day==1){// if first week's day of current month is monday then it wirtes to the second line, in other case to the first line
        i=2;
        j=week_day-1;
        k=6;
    }
    if(week_day==0){// if first week's day is sunday
        i=1;
        j=6;
        k=5;
    }
    else{
        i=1;
        j=week_day-1;
        k=week_day-2;
    }
    var rows = document.getElementsByTagName('tr');    
 table with numbers of current and next month
    for(i; i<7; i++ ){
        var columns = rows[i].getElementsByTagName('td');
        for(j; j<7; j++){
            columns[j].innerHTML = local_date.getDate().toString();
            local_date.setDate(local_date.getDate()+1);
        }
        j=0;
    }

    local_date = new Date();
    var columns = document.getElementsByTagName('tr')[1].getElementsByTagName('td'); //filling calendar table with numbers of previous month
    for(k; k>=0; k--){ //filling numbers of previous in reversed order
        local_date.setDate(local_date.getDate()-1);
        columns[k].innerHTML = local_date.getDate().toString();
    }
}

function cellClicked() {  
    var rows = document.getElementsByTagName('tr');    
    for(var i=1; i<7; i++ ){
        var columns = rows[i].getElementsByTagName('td');
        for(var j=0; j<7; j++){
            columns[j].onclick{
               alert('Has selected: '+local_date);
            }
        }
        j=0;
    }
}

How to correct the code to achieve the calendar to be filled correctly and serve the date message by clicking on a curtain calendar cell?

EDIT1

<table>
                <tr>
                    <th>Mo</th>
                    <th>To</th>
                    <th>We</th>
                    <th>Th</th>
                    <th>Fr</th>
                    <th class="weekend">Sa</th>
                    <th class="weekend">Su</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
            </table>

Because the listener attached in the *cellClicked* function has a closure to the global *local_date* variable, which returns the last date assigned to it in the *calendarFill* function, not the value it had when the listener was attached. See [*How do JavaScript closures work?*](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?s=1|968.7849) Also [*JavaScript closure inside loops – simple practical example*](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). — RobG, Feb 25 '18 at 21:56

Data output by clicking on calendar cell

0 Answers0