Repeated function with onclick()

Question

I have this function called week(), which gives me the current the first (startDate) and last (endDate) day of the week and the week number. I also have these two other functions called weekPlus() and weekMinus(), which contains variables that add or substract from the variables startDate / endDate by 7 and from the week number by 1.

<script>
    // First and last day of the current week
    var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
    function week() {
        var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
        // First day of the week
        var first = curr.getDate() - curr.getDay();

        // Last day of the week
        var last = first + 6;

        var startDate = new Date(curr.setDate(first));
        var endDate = new Date(curr.setDate(last));

        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;

        // Week number
        Date.prototype.getWeekNumber = function () {
            var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
            var dayNum = d.getUTCDay() || 7;
            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }

    function weekPlus() {

        // First day of the week
        var first = curr.getDate() - curr.getDay();

        // Last day of the week
        var last = first + 6;

        var startDate = new Date(curr.setDate(first + 7));
        var endDate = new Date(curr.setDate(last + 7));

        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;

        // Week number
        Date.prototype.getWeekNumber = function () {
            var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
            var dayNum = d.getUTCDay() || 7;
            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7 + 1);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }

    function weekMinus() {

        // First day of the week
        var first = curr.getDate() - curr.getDay();

        // Last day of the week
        var last = first + 6;

        var startDate = new Date(curr.setDate(first - 7));
        var endDate = new Date(curr.setDate(last - 7));

        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;

        // Week number
        Date.prototype.getWeekNumber = function () {
            var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
            var dayNum = d.getUTCDay() || 7;
            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7 - 1);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }
</script>

<div id="start">start</div>
<div id="end">end</div>
<div id="week">week</div>
<button onclick="week()">current</button>
<button onclick="weekPlus()">add</button>
<button onclick="weekMinus()">substract</button>

So the idea is that when you first click the current button you get the current date of the weeks first and last day and after that you can either add or substract to the dates.

So is there any quick and effective way to increase or decrease the days by 7 and the week number by 1 every time you click the buttons and not just once?

Problems with the code:

Adding or substracting when the month changes, month name doesn't change but stays the same, for example: Sun Oct 29 2017 19:20:14 - Wed Oct 04 2017 19:20:14
When adding or substacting, the week number sometimes jumps by 2, 5 or more.

https://stackoverflow.com/questions/563406/add-days-to-javascript-date — Kurohige, Aug 26 '17 at 13:22

ishegg · Accepted Answer · 2017-08-26T16:37:47.650

The problem is that you're defining cur every time you call the function. If you define it outside, you can keep on adding days to the same starting date:

// First and last day of the current week
var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
    function weekPlus()
    {
    
        // First day of the week
        var first = curr.getDate() - curr.getDay();
    
        // Last day of the week
        var last = first + 6;
    
        var startDate = new Date(curr.setDate(first + 7));
        var endDate = new Date(curr.setDate(last + 7));
    
        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;
    
        // Week number
        Date.prototype.getWeekNumber = function () {
        var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
        var dayNum = d.getUTCDay() || 7;
        d.setUTCDate(d.getUTCDate() + 4 - dayNum);
        var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
                    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7 + 1);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }

<div id="start">start</div>
<div id="end">end</div>
<div id="week">week</div>
<button onclick="weekPlus()">add</button>

You had some problems with the curr variable, since you were modifying it as you used it. Keep it as a reference and then you'll have no problems:

    // First and last day of the current week
    var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);
    curr.setHours(0,0,0,0);
    function week() {

        // First day of the week
        var first = curr.getDate() - curr.getDay();

        // Last day of the week
        var last = first + 6;

        var startDate = new Date(curr.setDate(first));
        var endDate = new Date(curr.setDate(last));

        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;

        // Week number
        Date.prototype.getWeekNumber = function () {
            var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
            var dayNum = d.getUTCDay() || 7;
            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }

    function startOfWeek(date) {
        date.setDate(date.getDate() - date.getDay());
        return date;
    }

    function endOfWeek(date) {
        date = startOfWeek(date);
        date.setDate(date.getDate() + 6);
        return date; 
    }

    function weekPlus() {


        var startDate = new Date(startOfWeek(curr));
        startDate.setDate(startDate.getDate() + 7);
        var endDate = endOfWeek(curr);
        endDate.setDate(endDate.getDate() + 7);
        curr = startDate;

        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;

        // Week number
        Date.prototype.getWeekNumber = function () {
            var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
            var dayNum = d.getUTCDay() || 7;
            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7 + 1);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }

    function weekMinus() {

        var startDate = new Date(startOfWeek(curr));
        startDate.setDate(startDate.getDate() - 7);
        var endDate = endOfWeek(curr);
        endDate.setDate(endDate.getDate() - 7);
        curr = startDate;

        document.getElementById("start").innerHTML = startDate;
        document.getElementById("end").innerHTML = endDate;

        // Week number
        Date.prototype.getWeekNumber = function () {
            var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
            var dayNum = d.getUTCDay() || 7;
            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
            return Math.ceil((((d - yearStart) / 86400000) + 1) / 7 - 1);
        };
        document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());
    }

<div id="start">start</div>
<div id="end">end</div>
<div id="week">week</div>
<button onclick="week()">current</button>
<button onclick="weekPlus()">add</button>
<button onclick="weekMinus()">substract</button>

And same for the week number, I just need to define it outside the function? — IlariM, Aug 26 '17 at 13:28
No, you're getting the week number off `curr`, so just use that variable to get it. Notice I also changed the line where you get the week: `document.getElementById("week").innerHTML = ("Week " + curr.getWeekNumber());`. See `curr` instead of `new Date()` — ishegg, Aug 26 '17 at 13:30
Thank you. This same principle would apply similar to the `weekMinus` function? — IlariM, Aug 26 '17 at 13:39
Right. Use the same `curr` in your `weekMinus()`. Then, you'd be modifying the same Date in both functions. — ishegg, Aug 26 '17 at 13:54
Still have some problems with it (edited the code in the post), the idea would be first to press the current week and then + or - to affect that function. Any ideas with this? — IlariM, Aug 26 '17 at 14:06
It's not a good idea to edit the original question, it will confuse future readers. Rollback to the original question, describe the problem here and I'll help you. Or ask another question :) — ishegg, Aug 26 '17 at 15:37
I'm sorry it was my mistake. I wasn't clear enough in the original post. — IlariM, Aug 26 '17 at 15:39
Well now you have my answer in your question so it looks like I just reposted your code. And it's still not clear what your problem is. — ishegg, Aug 26 '17 at 15:42
The problem is that when I add the `week()` and `weekMinus()` functions to the code, the week number isn't following along the dates. Also if I try the current button after adding or substracting, it doesnt go back to the current time. Updated the code in the question — IlariM, Aug 26 '17 at 15:45
To reset the current week, simply reset the `curr` value at the top of `week()`. Like this: `curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);` — ishegg, Aug 26 '17 at 15:49
I see. How about the week number? sometimes the number jumps by 2 or 5. Should I get the week number another way that is linked to the `curr`? — IlariM, Aug 26 '17 at 15:54
Also noticed when substracting during the month change, the month name doesn't change for example: Sun Oct 29 2017 19:20:14 - Wed Oct 04 2017 19:20:14 — IlariM, Aug 26 '17 at 16:13
Hey, I edited the answer. Now the weeks are added/subtracted correctly. About the week number, there must be something wrong with the function you're using. Try [this one](https://gist.github.com/dblock/1081513). If it doesn't work, **post another question**, this one got messy enough already. — ishegg, Aug 26 '17 at 16:38

score 2 · Answer 2 · answered Aug 26 '17 at 13:21

You can move the curr variable outside of the function and every time you run the function - update the value of that variable:

// First and last day of the current week
var curr = new Date(new Date().getTime() + 60 * 60 * 24 * 7);

function weekPlus() {

  // First day of the week
  var first = curr.getDate() - curr.getDay();
  // Last day of the week
  var last = first + 6;
  
  var startDate = new Date(curr.setDate(first + 7));
  var endDate = new Date(curr.setDate(last + 7));

  document.getElementById("start").innerHTML = startDate;
  document.getElementById("end").innerHTML = endDate;

  // Week number
  Date.prototype.getWeekNumber = function () {
  var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
  var dayNum = d.getUTCDay() || 7;
  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
  var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
              return Math.ceil((((d - yearStart) / 86400000) + 1) / 7 + 1);
  };
  document.getElementById("week").innerHTML = ("Week " + new Date().getWeekNumber());
  
  curr = startDate;
}

<div id="start"></div>
<div id="end"></div>
<div id="week"></div>
<input type="button" value="Plus" id="plus" onclick="weekPlus()"/>

Repeated function with onclick()

2 Answers2