CODEWITHSUNDEEP
javascripthtml
Niek
Niek

Reputation: 23

javascript overwritting html buttons

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. Does anyone know how to fix this?

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

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

Upvotes: 1

Views: 73

Answers (1)

user796446
user796446

Reputation:

document.write immediately replaces any HTML you might have in the page.

Instead add something like a tempt var and then push HTML to that.

In a moment, I will add a jsfiddle here to show you.

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

Upvotes: 2

Related Questions