JavaScript - Issue about undefined variables inside arrays

Question

Hey im having a hard time trying to fix this: I got a php calendar made and each day has an ordered id by setting it to "day+month" value (f.e, jan 5th is #0501). What im trying to do here is to use javascript (and Jquery to detect that id, and if mouse hovers on that square, display event of that day. But when i hover on the square it displays "undefined"
Javascript:

var day = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];
var month = ["01","02","03","04","05","06","07","08","09","10","11","12"];

for (var j=0;j<=month.length;j++){
    for (var i=0;i<=day.length;i++){
        $("#" + day[i] + month[j]).hover(function(){
            $(this).css({'background-color':'#416E86'});
            $(".day-number-big").css({"background-color":"#EEE"});
            $(".day-number-big").html("<h4>" + day[i] + month[j] + "</h4>");
        },
        function(){
            $(this).css({'background-color':'#FFF'});
        });
    }
}

HTML & CSS:

<div class="day-number-big" style="position:absolute;right:0px;width:75px;height:75px;background-color:#204F88;">
                    <div class="day-number-wrapper" style="position:static;width:23px;height:20px;margin:22px auto auto auto;color:#FFF;">

                    </div>
                </div>

PHP:

if ($list_day<10){
        $list_day="0".$list_day;
    }
    $sql = "SELECT * FROM cal_cma ORDER BY fec_cal";
    $query = mysql_query($sql,$conn);
    $checkdate= $list_day."".$month."".$year;
    while ($row = mysql_fetch_array($query)){
        $checkdate2 = date_adjust($row['fec_cal']);
          if ($checkdate == $checkdate2){
              $calendar.= '<td class="calendar-day" id="'.substr($checkdate2,0,4).'">';
              $calendar.= '<div class="day-number-db">'.$list_day.'</div>';
              $calendar.= "<p></p>";
              $calendar.= '</td>';
              break;
          }
    }
        if ($checkdate != $checkdate2){
              $calendar.= '<td class="calendar-day" id="'.substr($checkdate,0,4).'">';
              $calendar.= '<div class="day-number">'.$list_day.'</div>';
              $calendar.= "<p></p>";
              $calendar.= '</td>';
        }

Note: The "date_adjust" function applies changes to format YYYY-MM-DD to DDMMYYYY.

Answer 1

day[i] and month[j] will always be day[day.length+1] and month[month.length+1] in your "hover" event, after initialization.

You should recompute these values inside you "hover" callback from the "id" attribute of the HTML element.

An other way is to store these data into the jQuery object of the HTML element:

    $("#" + day[i] + month[j]).data( "month", month[j] );
    $("#" + day[i] + month[j]).data( "day", day[i] );

    $("#" + day[i] + month[j]).hover(function(){
                $(this).css({'background-color':'#416E86'});
                $(".day-number-big").css({"background-color":"#EEE"});
                $(".day-number-big").html("<h4>" + $(this).data( "day" ) + $(this).data( "month" ) + "</h4>");
            },
            function(){
                $(this).css({'background-color':'#FFF'});
            });