How to loop through days array starting from the current date

Question

I've built a simple app that prints days from an array. When you click the button, you print another day and another etc. However, when I add a starting point - the current day - I cannot loop through following days.

 const days = [ "Monday ", "Tuesday ", "Wednesday ", "Thursday ", "Friday ", "Saturday ", "Sunday ", ]; const btn = document.querySelector("#btn"); let d = new Date(); let currentDay = d.getDay(); const list = document.querySelector("#list"); let i = 0; btn.addEventListener("click", function () { let newEl = document.createElement("li"); newEl.textContent = days[currentDay]; // this is the place where I'm stuck // I cannot write: days[currentDay]++ i++; if (i >= days.length) i = 0; list.append(newEl); });

 <h2>Days of the week:</h2> <ul id="list"></ul> <button id="btn">Add one more day</button>

Answer 1

You're using days[currentDay] . But since currentDay does not change, it won't work

---

Lets go this way:

1. After getting currentDay , set i to currentDay (this is ok since your array has the correct order, we could use indexOf aswell.

2. Use i as index to show the date:

 const days = [ "Monday ", "Tuesday ", "Wednesday ", "Thursday ", "Friday ", "Saturday ", "Sunday ", ]; const btn = document.querySelector("#btn"); let d = new Date(); let currentDay = d.getDay(); const list = document.querySelector("#list"); let i = currentDay; btn.addEventListener("click", function () { let newEl = document.createElement("li"); newEl.textContent = days[i]; i++; if (i >= days.length) i = 0; list.append(newEl); });

 <h2>Days of the week:</h2> <ul id="list"></ul> <button id="btn">Add one more day</button>

Answer 2

The getDay() method returns the day of the week where 0 represents Sunday

Perhaps all you have to do is make Sunday the first element of the array

Please try the following code

const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat",
];

var currentDay = new Date().getDay();  // Sun = 0, Mon = 1, ..., Sat = 6 

console.log(days[currentDay]);

console.log(days[currentDay + 1]);

Hopefully I did not misunderstand your question

Fabio

Answer 3

The issue was with the placement of ++ that you were trying. Also you don't require an extra variable i

const days = [
  "Monday ",
  "Tuesday ",
  "Wednesday ",
  "Thursday ",
  "Friday ",
  "Saturday ",
  "Sunday ",
];

const btn = document.querySelector("#btn");

let d = new Date();
let currentDay = d.getDay();

const list = document.querySelector("#list");

btn.addEventListener("click", function () {
  let newEl = document.createElement("li");

  newEl.textContent = days[currentDay++];
 
  if (currentDay >= days.length) currentDay = 0;
  list.append(newEl);
});

Answer 4

You are incrementing i but you never change the currentDay .

In your function, remove i and use currentDay instead.

Here is the code:

const days = [
    "Monday ",
    "Tuesday ",
    "Wednesday ",
    "Thursday ",
    "Friday ",
    "Saturday ",
    "Sunday ",
];

const btn = document.querySelector("#btn");

let d = new Date();
let currentDay = d.getDay();

const list = document.querySelector("#list");

btn.addEventListener("click", function () {

    currentDay++; // add 1 to currentDay
    if (currentDay > days.length) currentDay = 0; // reset currentDay to 0 each week

    let newEl = document.createElement("li");
    newEl.textContent = days[currentDay];  
    list.append(newEl);
});