JavaScript get days with words, five ahead of current day

Question

I would like to put 5 upcoming day names in some divs on my website. I've created array for day names, then I'm calling values from it and adding number of days. That method works only for 1st day ahead, then array is over, from day 2 till 5 it echoes "undefined".

Some help please?

var weekday=new Array(7);
weekday[0]="Nedelja";
weekday[1]="Ponedeljek";
weekday[2]="Torek";
weekday[3]="Sreda";
weekday[4]="Četrtek";
weekday[5]="Petek";
weekday[6]="Sobota";
var dan = weekday[today.getDay()];

var dan_1 = weekday[today.getDay()+1];
document.getElementById("day1").innerHTML = dan_1;
var dan_2 = weekday[today.getDay()+2];
document.getElementById("day2").innerHTML = dan_2;
var dan_3 = weekday[today.getDay()+3];
document.getElementById("day3").innerHTML = dan_3;
var dan_4 = weekday[today.getDay()+4];
document.getElementById("day4").innerHTML = dan_4;
var dan_5 = weekday[today.getDay()+5];
document.getElementById("day5").innerHTML = dan_5;

Thank you guys!

Answer 1

Well, you need to % with 7 (number of days in a week)

var weekday=new Array(7);
weekday[0]="Nedelja";
weekday[1]="Ponedeljek";
weekday[2]="Torek";
weekday[3]="Sreda";
weekday[4]="Četrtek";
weekday[5]="Petek";
weekday[6]="Sobota";
var dan = weekday[today.getDay()%7];

var dan_1 = weekday[(today.getDay()+1)%7];
document.getElementById("day1").innerHTML = dan_1;
var dan_2 = weekday[(today.getDay()+2)%7];
document.getElementById("day2").innerHTML = dan_2;
var dan_3 = weekday[(today.getDay()+3)%7];
document.getElementById("day3").innerHTML = dan_3;
var dan_4 = weekday[(today.getDay()+4)%7];
document.getElementById("day4").innerHTML = dan_4;
var dan_5 = weekday[(today.getDay()+5)%7];
document.getElementById("day5").innerHTML = dan_5;

For example: if today.getDay() returns 5, next 5 days is 10 which does not exist in your array. When you % 7, you get back 3 (next week)

Answer 2

You could add a modulo % operation within your array accessing to prevent the overflow and restart at the beginning:

// ...
var dan_1 = weekday[(today.getDay()+1)%7];
document.getElementById("day1").innerHTML = dan_1;
var dan_2 = weekday[(today.getDay()+2)%7];
document.getElementById("day2").innerHTML = dan_2;
var dan_3 = weekday[(today.getDay()+3)%7];
document.getElementById("day3").innerHTML = dan_3;
var dan_4 = weekday[(today.getDay()+4)%7];
document.getElementById("day4").innerHTML = dan_4;
var dan_5 = weekday[(today.getDay()+5)%7];
document.getElementById("day5").innerHTML = dan_5;

Example Fiddle

Answer 3

Your problem is pushing forward the day in a logical way. This is achieved by adding to the current day and selecting the remainder (modulo, %) from a division by 7. See the (dan + i) % 7 part in the code below.

I’m going to use the already fixed code from Khanh TO’s answer and write it in a more concise way. Right now your code is a little repetitive, which could be helped by using an array literal and a loop.

var today = new Date();
var weekday = ["Nedelja","Ponedeljek","Torek","Sreda","Četrtek","Petek","Sobota"];
var dan = today.getDay();
for (var i = 1; i <= 5; i++) {
    var elem = document.getElementById("day" + i);
    elem.innerHTML = weekday[(dan + i) % 7];
}

I believe it’s beneficial for you to see a more elegant style.