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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts

    script ignores the change in the select menu

    the script below should open a new window with a url specified in the select area. However, my script ignores the changes in the select area. it keeps opening the same page. I was wondering could someone take a look and tell me why?
    Thank you very much.

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Jump Menu</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript">
    function jump_menu() {
    var i=document.getElementById("page_select").selectedIndex;
    document.getElementById("jump_to_page").onclick=function() {
    (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value);
    }
    }

    window.onload=jump_menu;
    </script>
    </head>
    <body>
    <select id="page_select">
    <option>Select a Page</option>
    <option value="yahoo.ca">Yahoo</option>
    <option value="topnews.ru">Top News</option>
    <option value="google.com">Google</option>
    <option value="amazon.com">Amazon</option>
    </select>
    <button type="button" id="jump_to_page">Go</button>

    </body>
    </html>

    </code>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    this seems to work better... don't like that alert on window load much though

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Jump Menu</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript">
    
    function openPage() {
    var i=document.getElementById("page_select").selectedIndex;
    (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value);
    }
    
    window.onload=alert("Please select a page to go")
    </script>
    </head>
    <body>
    <select id="page_select">
    <option>Select a Page</option>
    <option value="yahoo.ca">Yahoo</option>
    <option value="topnews.ru">Top News</option>
    <option value="google.com">Google</option>
    <option value="amazon.com">Amazon</option>
    </select>
    <button type="button" id="jump_to_page" onclick="openPage()">Go</button>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Thank you, xelawho.

    the idea was not to use any inline-scripting. Plus, I dont want an alert message after the window is loaded.

    It seems the script has some kind of logical error.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    how about this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Jump Menu</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    
    </head>
    <body>
    <select id="page_select">
    <option>Select a Page</option>
    <option value="yahoo.ca">Yahoo</option>
    <option value="topnews.ru">Top News</option>
    <option value="google.com">Google</option>
    <option value="amazon.com">Amazon</option>
    </select>
    <button type="button" id="jump_to_page">Go</button>
    <script type="text/javascript">
    document.getElementById("jump_to_page").onclick=function() {
    var i=document.getElementById("page_select").selectedIndex;
    (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value);
    }
    </script>
    </body>
    </html>
    </code>

  • Users who have thanked xelawho for this post:

    chickentulip (01-05-2012)

  • #5
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    thank you!. it is working. I will study you code. I still don't understand why my code did not produce the result i was after.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    actually your script was pretty close - you only needed to move this line:
    Code:
    var i=document.getElementById("page_select").selectedIndex;
    inside the onclick function so that the selectedIndex variable changed every time the button was clicked.

    I moved it around because all the jump_menu function was doing in the end was setting the onclick for the button on window load - which gets done anyway if you just leave it at the start of the script (but after the html elements have been defined)

  • #7
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Thank you. yes, i noticed myself that it is a matter of placing the line that you talking about as the first line in the anonymous function to make my original script working.
    i had no idea that the position of this line in the code would matter


  •  

    Posting Permissions

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