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>
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
You're using days[currentDay]. But since currentDay does not change, it won't work
Lets go this way:
After getting currentDay, set i to currentDay (this is ok since your array has the correct order, we could use indexOf aswell.
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>
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);
});