JavaScript覆盖HTML按钮

我试图用JavaScript生成日历，当我点击我的“Volgende”按钮去下个月我的按钮被覆盖。有谁知道如何解决这一问题？JavaScript覆盖HTML按钮

的HTML：

<body> 
<button id="Vorige">Vorige</button> <button id="Volgende" onclick="VolgendeFunc()">Volgende</button> 
<br> 
<div id="div"> 
<script type="text/javascript" src="Kal.js"> </script> 
</div> 
</body> 

</html>

而且这里的JS：

var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
var today = new Date(); 
var dag = today.getDay(); 
var myMonth = today.getMonth(); 
var jaar = today.getFullYear(); 

function VolgendeFunc(){ 
    myMonth = myMonth + 1; 
    Kalender(); 
} 

function Kalender(){ 
document.write(monthNames[myMonth] + jaar + "<br>"); 
    for (var i=1; i <= monthLength[myMonth]; i++){ 
    document.write("<a href='#'>" + i + "</a> "); 
     if (i == 7){ 
     document.write ("<br>"); 
     } 
     if (i == 14){ 
     document.write ("<br>"); 
     } 
     if (i == 21){ 
     document.write ("<br>"); 
     } 
     if (i == 28){ 
     document.write ("<br>"); 
     } 

    } 
} 
window.onload=Kalender();

来源

2014-10-20 Niek

你能描述一下你所说的“当我点击我的‘Volgende’按钮转到下个月我的按键会被覆盖”是什么意思？ – Termato 2014-10-20 18:06:00

可能是'document.write'是你当前问题的根源。另外，有时二月有29天。 – 2014-10-20 18:06:40

将“Volgende”按钮视为NextMonth按钮 – Niek 2014-10-20 18:22:17

文件撰写立即替换你可能在页面的任何HTML。

相反，添加一些像一个诱惑变种，然后将HTML推到。

一会儿，我会在这里添加一个jsfiddle来向你展示。

你的代码有一些其他问题......但这会让你超过第一个问题。

UPDATED EXAMPLE

var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
var today = new Date(); 
var dag = today.getDay(); 
var myMonth = today.getMonth(); 
var jaar = today.getFullYear(); 

var VolgendeFunc = function(){ 
    myMonth = myMonth + 1; 
    Kalender(); 
} 

var BackFunc = function(){ 
    myMonth = myMonth -1; 
    Kalender(); 
} 

function Kalender(){ 
    var myHTML =''; 
    myHTML+=monthNames[myMonth] + jaar + "<br>"; 
    for (var i=1; i <= monthLength[myMonth]; i++) 
    { 
     myHTML+="<a href='#'>" + i + "</a> "; 
     if (i%7 == 0) { myHTML += "<br>"; } //Save you some lines (best practice) 
    } 

    document.getElementById('div').innerHTML = myHTML; 
} 

document.addEventListener("DOMContentLoaded", Kalender, false);

来源

2014-10-20 18:14:45

@termato感谢您的编辑。 :) – 2014-10-20 18:37:20

非常感谢你们！ – Niek 2014-10-20 18:42:07

接受答案是正确的，这是说谢谢的最好方式。 ;-) – 2014-10-20 18:43:15

JavaScript覆盖HTML按钮

回答

相关问题