Need help making two buttons change the date one day at a time.

TomFIng · 04-10-2004, 02:25 PM

I am very new at JavaScript (I started yesterday afternoon.). I am trying to have a simple one-file html page that lets me change the picture and the file it links to. (It links to itself.) I also wanted to change the display date when the picture changes. My script is below, that's about as far as I got. So far it gives me an error telling me that 'previous' is undefined. Under the horizontal rule tag is what the content is supposed to look like. I mainly wanted the JavaScript to edit the file for me as I was getting tired of changing everything myself everday. This is for my own personal use. Thank you for your help.

Thomas ><>

<html>
<head>
<title>FoxTrot Daily</title>
<script language="javascript">

var date = new Date();

var currentYearLong = date.getFullYear()
var currentYearShort = date.getYear()
var currentMonth = date.getMonth()
var currentDay = date.getDay()

var currentDate = currentYearShort + currentMonth + currentDay;
var displayDate = currentYearLong + " " + currentMonth + " " + currentDay;

previous.onclick = dateP();
next.onclick = dateN();

function doItNow()
{
document.write = "Hello World";
}

function dateP()
{
currentDay = currentDay - 1;
UpdateScreen();
}

function dateN()
{
currentDay = currentDay + 1;
UpdateScreen();
}

function UpdateScreen()
{
display.innerText = "FoxTrot " + displayDate;
current.innerHTML = "<a href='http://www.msnbc.com/comics/comics/ft" + currentDate + ".gif'><img src='http://www.msnbc.com/comics/comics/ft" + currentDate + ".gif' /></a>"
}

</script>
</head>

<body>

<a id="previous" href="#">Previous</a> <a id="next" href="#">Next</a>


<hr />

FoxTrot 2004 04 12
<a href="http://www.msnbc.com/comics/comics/ft040412.gif"><img src="http://www.msnbc.com/comics/comics/ft040412.gif" /></a>
</body>
</html>

Willy Duitt · 04-12-2004, 02:30 PM

I do not know if you have already figured this out yourself but,
I kinda like that cartoon myself so I had a play at it.

The problem with your (previous is undefined) error stems from trying to use a generic window.onclick event handler when it would be more appropriate to just use a link or button to call your functions.

The two other problems I seen was your use of: getDay()
For your currentDay variable. This would return 0-6 and not the date (1-31) which you would need.

The other problem was that you would need to add a leading zero to those dates which are less than 10.

Below is what I mashed together to fix those problems:

Code:

<html>
<head>
<title>FoxTrot Daily</title>
<script type="text/javascript">
<!--//
 var date = new Date();
 var currentDay   = date.getDate();
 var currentMonth = date.getMonth()+1; 
 var currentYear  = date.getFullYear();
 var dateString   = currentYear +" "+format(currentMonth)+" ";

  function format(number){
    var zero="";
    if(number<10) zero+="0";
    return zero+number.toString();
  }

  function updateScreen(num){
    currentDay  = currentDay*1+num;
    displayDate = dateString+" "+format(currentDay);
    currentDate = dateString.replace(/\s/g,'').substring(2)+format(currentDay);
    var theImg  = 'http://www.msnbc.com/comics/comics/ft'+currentDate+'.gif';
    var element = document.getElementById;
        element('display').innerHTML = 'FoxTrot '+displayDate;
        element('link').href = theImg;
        element('image').src = theImg;
  }
 //-->
</script>
</head>

<body onload="updateScreen(0)">
<p id="display"></p>
<p><a href="javascript:updateScreen(-1)">Previous</a>
<a href="javascript:updateScreen(+1)">Next</a></p>
<p><a id="link" href=""><img id="image" src="" /></a></p>
<hr />
</body>
</html>

And if you look here you will find an example which I put together which also fixes the problem of going backwards and forward between monthes and years.

.....Willy

TomFIng · 04-13-2004, 12:16 AM

Thank you so very much!! That is absolutely perfect!

Thoma ><>