Javascript setDate() bug

Question

I wanted to make a function that changes a li element in such a way that it shows the date of the next week every time the Next week button is pressed but I don't know how to check if a new month has started using the setDate() method.

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const elemen = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh"];
var weeknumber = 0;

function setweek() {
  let d = new Date();
  const start = d.getDate();
  for (let i = 0; i < 7; i++) {
    d.setDate(start + i)
    document.getElementById(elemen[i]).innerHTML = days[d.getDay()] + '<br>' + d.getDate() + "." + (d.getMonth() + 1);
  }
}

function addweek() {
  weeknumber++;
  let d = new Date();
  const start = d.getDate();
  for (let i = 0; i < 7; i++) {
    d.setDate(start + i + (weeknumber * 7));
    // In this code I need a if function too check if a month has passed so it sets the weeknumber to 0.
    document.getElementById(elemen[i]).innerHTML = days[d.getDay()] + '<br>' + d.getDate() + "." + (d.getMonth() + 1);
  }
}

<body onload="setweek();">
  <label for="weekly_meal_plan">Weekly meal plan:</label><br>
  <ul class="list-group" id="weekly_meal_plan">
    <li id="first" class="list-group-item list-group-item-action"></li>
    <li id="second" class="list-group-item list-group-item-action"></li>
    <li id="third" class="list-group-item list-group-item-action"></li>
    <li id="fourth" class="list-group-item list-group-item-action"></li>
    <li id="fifth" class="list-group-item list-group-item-action"></li>
    <li id="sixth" class="list-group-item list-group-item-action"></li>
    <li id="seventh" class="list-group-item list-group-item-action"></li>
  </ul>
  <br>
  <button id="nweek" onclick="addweek();">Next week</button>
</body>

Sorry its not a bug, I just don't understand how to check if a month has passed in setDate(). — Bottom Croat, Dec 08 '20 at 12:57
Does this answer your question? [Add days to JavaScript Date](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — Titulum, Dec 08 '20 at 12:57
@Titulum unfortunately no, using the answer with the highest points will just get it stuck to 8.12 for every li element. — Bottom Croat, Dec 08 '20 at 13:09

score 1 · Accepted Answer · answered Dec 08 '20 at 13:14

This should work:

function addweek() {
  weeknumber++;
  for (let i = 0; i < 7; i++) {
    let d = new Date();
    const start = d.getDate();
    d.setDate(start + i + (weeknumber * 7));
    // In this code I need a if function too check if a month has passed so it sets the weeknumber to 0.
    document.getElementById(elemen[i]).innerHTML = days[d.getDay()] + '<br>' + d.getDate() + "." + (d.getMonth() + 1);
  }
}

Now, at every iteration of the loop, the starting date gets resetted to today.

The problem of your code was that once you use setDate(32), the month would permanently change. In the next iteration, you would use setDate(33) on the NEW date, with the month already incremented.

Yes, this works. I thought to add a if function that would change the weeknumber to 0 but this is way better. Thank you. — Bottom Croat, Dec 08 '20 at 13:18

Javascript setDate() bug

1 Answers1