script ignores the change in the select menu

chickentulip · 01-05-2012, 04:18 PM

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>

xelawho · 01-05-2012, 04:47 PM

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>

chickentulip · 01-05-2012, 05:02 PM

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.

xelawho · 01-05-2012, 05:09 PM

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>

chickentulip · 01-05-2012, 05:15 PM

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.

xelawho · 01-05-2012, 05:31 PM

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)

chickentulip · 01-05-2012, 05:54 PM

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