Increment today's date by 1

This site is best viewed in a modern browser with JavaScript enabled.

rmcm

I am new to javascript, and trying to implement a javascript function to increment today's date by 1 every time next button is pressed (would also like to include a previous button as well) and would appreciate if anyone could point me in the right direction.

I have included my work so far, a bit messy at the moment it currently displays today's date in ('yyyy-mm-dd') format and then when press the "Next" Button it will increment by one, but it will only perform this procedure once.

<script type="text/javascript">
    (function () {

    var date = new Date(),
        outputValue = document.getElementById( 'outputValue' ),
        dateString =  date.getFullYear().toString() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;

document.onclick = function() {
        dateString =  date.getFullYear().toString() + "-" + (date.getMonth() + 1) + "-" + (date.getDate()+1) ;
        outputValue.innerHTML = dateString;
    };

    outputValue.innerHTML = dateString;

})();

</script>

<div id="outputValue"></div>
<input type="button" id="next" value="Next" />

jalarie

First, you are trying to reference 'outputValue' before it is defined. Move the script to after the 'div' tag.

Next, the value of 'date' is being redefined to 'new Date()' every time the function is run. Move it to before the function.

Then, the value of 'date' is never reset to the new value.

root

http://www.w3schools.com/jsref/jsref_setdate.asp

Why are you using an anonymous function? You are best avoiding anonymous function because they introduce errors that will make debugging difficult, like reporting an error at line 1 when you could have several lines of code in the anon func and the JavaScript console only sees that the error is on line 1.

Make life easier for you, avoid anon functions.

rmcm

Thanks for your help appreciate it. Here is the code working

<input type="button" id="prev" value="Prev" />
<div id="outputValue"></div>
<input type="button" id="next" value="Next" />

<script type="text/javascript">

var date = new Date();

(function () {
            outputValue = document.getElementById( 'outputValue' ),
            dateString =  date.getFullYear().toString() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
            outputValue.innerHTML = dateString;


document.getElementById("next").onclick = function() {
            date.setDate(date.getDate() + 1);  

    dateString =  date.getFullYear().toString() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
            outputValue.innerHTML = dateString;
    };

document.getElementById("prev").onclick = function() {
            date.setDate(date.getDate() - 1);  

    dateString =  date.getFullYear().toString() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
            outputValue.innerHTML = dateString;
    };


})();

</script>

root

You are still using an anonymous function to run your code.

The link I provided should explain how you use setDate() to do what you want.

You should use HTML to set the onClick properties of a button as it makes life simpler and it should really be a form as well.