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 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript URL Array

    Hello, I'd like to have a single link point to 3 different URLs either randomly or consecutively. I'm not sure how to go about writing this script, but I think logically it'd go something like this:

    - Store the 3 URLs in varibales a, b, c.
    - Create new array with variables: urlArray = [a, b, c];
    - Create a function that iterates through the array on click, or that picks a variable randomly.
    - Assign that function to an onClick event inline in an <a> tag or something similar.

    If this is the proper logic, I still don't really know how I'd write this. And if there's a better way to go about it, let me know. Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Code:
    <script type="text/javascript">
    
    var urls = ["http://www.espn.com","http://www.disney.com","http://www.codingforums.com"];
    
    function goRandom( )
    {
        location.href = urls[ Math.floor( Math.random() * urls.length ) ];
        return false;
    }
    </script>
    
    ....
    
    <body>
    ...
    <a href="#" onclick="return goRandom();">click here</a>
    ...
    If you want the random url to pop up in a new window, just use target="_blank" in the <a> tag. If you want to control the size of the new window/popup, ask again.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Awesome, thanks so much Pendant. Couple of questions though:

    - How would I write it to just iterate consecutively instead of randomly?
    - As it is now, the new target _blank window pops up with the original page, while the old window loads the new url (behind the new popup page). How can i have the new url load in the new target _blank window?

    Thanks again for the quick reply!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    
    <script type="text/javascript">
    
    var urls = [ 
                     'http://www.google.com' , 
                     'http://www.yahoo.com' , 
                     'http://www.slate.com'
                ];
    
    var which = 0;
    
    </script>
    </head>
    <body>
    <a href="default.html" onclick="this.href=urls[which++%urls.length]" target="openme">open me</a>
    </body>
    </html>
    Doesn't give you any control over the popup, though - for that, you'd need to call window,open. And popups are controversial, naturally. And often blocked. [End of lecture].

  • Users who have thanked adios for this post:

    bonerton (05-13-2009)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Sorry about that...I forgot how I coded the popup between the time I wrote it and the time I made the comment about using it as a popup.

    Here's a complete solution, including control over the popup characteristics:
    Code:
    <html>
    <head>
    <title>Original Window</title>
    <script type="text/javascript">
    var urls = ["http://www.espn.com","http://www.disney.com","http://www.codingforums.com"];
    var rotate = 0;
    
    function goRandom( )
    {
        var newwin = window.open( 
                         urls[ rotate ], 
                         "POPUP",
                         "height=400,width=600,scrollbars=yes" /* add options as desired */
                         );
        newwin.focus( );
        rotate = ( rotate + 1 ) % urls.length;
        return false;
    }
    </script>
    
    </head>
    <body>
    <a onclick="return goRandom();">click here</a>
    </body>
    </html>
    You could use
    Code:
                         urls[ rotate++ % urls.length ],
    to get rid of the separate increment of rotate, as Adios did. I just find it clearer to write as I did.

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Awesome, thanks so much guys! Both approaches work, and I understand them except the "%" modulus part. In your code Pendant, this is what sorta throws me off:

    Code:
        rotate = ( rotate + 1 ) % urls.length;
        return false;
    and similarly in adios:
    Code:
    urls[which++%urls.length]
    Thanks!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    % means, as you noted, "modulo".

    7 % 3 is 1
    12 % 3 is 0
    20 % 3 is 2

    Modulo is the *remainder* you get after doing integer division.

    My code means that rotate will always be 0, 1, or 2.

    Suppose it currently is 2. rotate+1 will be 3. But 3 % 3 is 0. So it gets reset back to zero.

    which++%urls.length is sneakier.

    which++ means "bump the value of which *AFTER* using it.

    SO suppose which is 9. That expression is evaluated thus:
    -- get the current value of which (9) and then bump which by one (making it 10) but ignore the bumped up value in this code
    -- take the 9 % urls.length, which is 9 % 3, and the result is zero.
    -- use zero as the index into the array.

    SO suppose which is 10. That expression is evaluated thus:
    -- get the current value of which (10) and then bump which by one (making it 11) but ignore the bumped up value in this code
    -- take the 10 % urls.length, which is 10 % 3, and the result is 1.
    -- use 1 as the index into the array.

    Okay?

    Post-increment is, in my opinion, some that newbies should avoid. It's hard to understand. Pre-increment is much easier, in general.

  • Users who have thanked Old Pedant for this post:

    bonerton (05-13-2009)

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Many thanks, great explanation!

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    Post-increment is, in my opinion, some that newbies should avoid. It's hard to understand.
    That's a bit pedantic.
    I've never explained it to anyone and had them experience any difficulty in understanding it. In fact, describing the difference inevitably seems to lead to a better understanding of what an 'expression' is and how they're evaluated by the runtime engine. it's grasping those basics that help follow program flow and understanding how your code 'looks' to the environment it runs in.

    Modulus provides a neat way to cycle and recycle a counter without constantly re-checking & resetting it. And post-incrementing simply bumps up the operand after the expression it's in is fully evaluated, instead of before. Nice way to increment an index without writing an additional statement. I'd hardly call it challenging, but, ymmv ....

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Different strokes for different folks.

    Even after explaining it as I did above--and in more detail--I've had people who then turned around an completely misused post increment.

    I remember one person who wrote something like this:
    Code:
         var val = someArray[i++];
         ... calculations with val ...
         someArray[i++] = val;
    He thought he needed to post increment each time because he could see it was getting the value "from before" in that first line.

    I agree it doesn't take a genius to understand it, but...better safe than sorry?


  •  

    Tags for this Thread

    Posting Permissions

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