2014-11-02 59 views
0

我正在javascript中製作日曆,我不想在<div id=taken>內顯示當前日期,日期名稱和月份名稱,它在我的函數Kalender()內,但由於某種原因,如果我執行功能volgende()(下個月),它改變了<div id=taken>的月份,這不是當前日期和月份,我該如何解決這個問題?Javascript日曆不會顯示當天+月份

var dayNames = ['Zon', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 
    //Volledige Dagnamen// 
    var dayNamesFull = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag']; 
    //Volledige Maandnamen// 
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'Oktober', 'November', 'December']; 
    //Maand lengte van 0 - 11// 
    var monthLength = [31,28,31,30,31,30,31,31,30,31,30,31]; 
    //Nieuwe datum// 
    var today = new Date(); 
    //Vandaag// 
    var day = today.getDay(); 
    //vandaag zoekmaand// 
    var month = today.getMonth(); 
    //vandaag// 
    var vandaag = today.getDate(); 
    //volledig jaar// 
    var year = today.getFullYear(); 

//Kalender schrijf functie//  
function Kalender() { 
    var buttons = '<button id="vorige" onclick="vorige()">Vorige</button><button id="volgende" onclick="volgende()">Volgende</button>' 
    var kalender = ""; 

document.getElementById('Header').innerHTML = monthNames[month]+" "+year+buttons; 
    kalender += '<table id="cal"><div id="taken"></div>'; 

     for (var j = 1; j <= monthLength[month]; j++) { 
      if (vandaag == j) { 
       kalender +="<td id='tabeldagen' class='dagVandaag'>"+j; 
       } 
       else { 
        kalender += "<td id='tabeldagen'>"+j; 
       } 

        if (j % 7 == 0) { 
       kalender += "<tr>"; 
      } 
      kalender += '</td>'; 
     } 

    kalender += '</table>'; 
    document.getElementById('kalen').innerHTML = kalender; 
      document.getElementById('taken').innerHTML += dayNamesFull[day]+" "+vandaag+" "+monthNames[month]; 

    } 
//Leap Year// 
    if (month == 1) { 
     if (year % 4 == 0) { 
      monthLength = 29; 
    } 

} 





//Volgende Maand functie// 
function volgende() { 
month = month + 1; 
    if(month > 11) { 
     month = -1; 
     month = month + 1; 
     year = year + 1; 
    } 
     Kalender(); 
    } 
//Vorige maand functie// 
function vorige() { 
    month = month - 1; 
    if(month < 0) { 
     month = + 12; 
     month = month - 1; 
     year = year - 1; 
    } 
    Kalender(); 
} 

HTML:

<!DOCTYPE html> 
<head> 
    <title>Kalender</title> 
    <link type="text/css" rel="stylesheet" href="kalender.css"> 

</head> 
<body onload="Kalender()"> 
    <div id="kalender"> 
      <div id="Header"> 
      </div> 
     <div id="kalen"> 
     </div> 
    </div> 
    <script type="text/javascript" src="Kalender.js"></script> 
</body> 
</html> 

回答

1

的問題是,您更改功能volgende()vorige()daymonth變量。嘗試添加另一個變量當前的日期和月份:

//Vandaag// 
var day = today.getDay(); 
var currentDay = day; 
//vandaag zoekmaand// 
var month = today.getMonth(); 
var currentMonth= month; 

taken元素使用它們:

 document.getElementById('taken').innerHTML += dayNamesFull[currentDay]+" "+vandaag+" "+monthNames[currentMonth]; 
+0

它的工作!大聲笑我現在覺得很愚蠢,以至於我沒有自己想出這個。我想尊敬你的答案,但我只有13個代表:(你不受歡迎,歡迎使用 – Lozeputten 2014-11-02 20:47:24

+0

!有時候在自己的代碼中看到很小的錯誤真的很難,因爲它似乎太熟悉了) – ZuoLi 2014-11-02 20:48:55

相關問題