I cannot seem to get this to work. Any thoughts?
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(){
var urlString = "/";
var selectedVideo = this.options[this.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select onchange="selectVideo()">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
I cannot seem to get this to work. Any thoughts?
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(){
var urlString = "http://www.mycookingsite./";
var selectedVideo = this.options[this.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select onchange="selectVideo()">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
4 Answers
Reset to default 6I'm not sure what the value of this is in your code, but it's not the <select> element. Here's some working code:
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(){
var urlString = "http://www.mycookingsite./";
var videos = document.getElementById('videos');
var selectedVideo = videos.options[videos.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select id='videos' onchange="selectVideo()">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
Your function won't run within the context of the 'select' element because you're just calling the function regularly. To bat this either unobtrusively handle the event or pass 'this' from within your 'onchange' handler:
Option 1:
// first, give 'select' an id
document.getElementById('select-id').onchange = selectVideo;
Option 2:
<select onchange="selectVideo.call(this)">
Option 3: (The best IMHO)
function addEvent(elem, type, fn) {
var W3C, callback = function(e){ fn.call(elem, e||window.event); };
((W3C = elem.addEventListener) || elem.attachEvent)
((W3C?'':'on') + type, callback, false);
return callback;
}
addEvent(document.getElementById('select-id'), 'change', selectVideo);
You can only use this when you are in the event code. When you are in the function, this referrs to the window object. Send the reference as a parameter to the function:
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Video Test</title>
<script type="text/javascript">
function selectVideo(obj){
var urlString = "http://www.mycookingsite./";
var selectedVideo = obj.options[obj.selectedIndex];
if (selectedVideo.value != "nothing"){
window.location = urlString + selectedVideo.value;
}
}
</script>
</head>
<body>
<form>
<select onchange="selectVideo(this)">
<option value="nothing">Select video from this list</option>
<option value="how-to-grill-burgers">How to Grill Burgers</option>
<option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option>
</select>
</form>
</body>
</html>
Is this homework? There are multiple ways to correct it but one simple way is to make selectVideo take a obj parameter, then change all references to inside it to obj. Then, do selectVideo(this) in the onchange.
I highly remend QuirksMode, particularly this this page, if you want to really understand this.