Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>
    <p id="display"></p>
    <p><a id="previous" href="#">Previous</a> <a id="next" href="#">Next</a></p>
    <p id="current"></p>

    <hr />

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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Willy Duitt; 04-12-2004 at 02:37 PM.

  • #3
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

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

    Thoma ><>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •