JavaScript覆盖HTML按钮

Question

I'm attempting to generate a calender using JavaScript, when i click my "Volgende" button to go to the next month my buttons get overwritten. 我试图使用JavaScript生成日历，当我单击“ Volgende”按钮转到下个月时，我的按钮将被覆盖。 Does anyone know how to fix this? 有谁知道如何解决这一问题？

The 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>

And here the js: 这里的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();

Answer 1

document.write immediately replaces any HTML you might have in the page. document.write立即替换页面中可能包含的所有HTML。

Instead add something like a tempt var and then push HTML to that. 而是添加一个类似tempt var的东西，然后将HTML推送到其中。

In a moment, I will add a jsfiddle here to show you. 稍后，我将在此处添加一个jsfiddle给您展示。

Your code has some other issues...but this gets you past the first issue. 您的代码还有其他一些问题...但这可以使您摆脱第一个问题。

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);

JavaScript覆盖HTML按钮

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-10-20 18:14:45

JavaScript覆盖HTML按钮

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-10-20 18:14:45

解决方案1
2 已采纳 2014-10-20 18:14:45