how to use onclick event in html <select>
Online Demo: http://jsfiddle.net/thefourtheye/GP5HE/
Instead of the SPAN tags, you can use this
<select onChange="playVideo(this)">
<option value="Trailer5">Terms and Conditions may Apply</option>
<option value="Trailer10">How to Train your Dragon 2</option>
</select>
And the script has to be modified like this
<script type='text/javascript'>
function playVideo(a)
{
a = document.getElementById(a.value);
b = document.getElementById("videoPlayback");
b.innerHTML = a.innerHTML;
}
</script>
user2875405
Updated on July 09, 2022Comments
-
user2875405 almost 2 years
I have a video changer on my blog that can change videos on youtube using onclick. But that does't work using the select tag in Safari & Chrome.
I've read a bunch of other questions on how to do this but am having no luck in converting this to work using onchange with the select tag.
I am new to javascript.
BTW, I have not gotten this to work when plugged into jsfiddle, pastebin, or any other service.
But it does work if your paste it into http://htmledit.squarefree.com Try clicking on the different movie names to see what I mean.
But basically, I need this to work with the select tag, instead of span tag.
<div id='Trailer5' style='display:none'><iframe width='700' height='430' src='http://www.youtube-nocookie.com/embed/vEO9iLWBWvw?theme=light&version=3&rel=0&ps=blogger&iv_load_policy=3&showinfo=0' frameborder='0' allowfullscreen></iframe><h3>July 12th, 2013</h3></div> <div id='Trailer10' style='display:none'><iframe width='700' height='430' src='http://www.youtube-nocookie.com/embed/Fkbm8a40TC4?theme=light&version=3&rel=0&ps=blogger&iv_load_policy=3&showinfo=0' frameborder='0' allowfullscreen></iframe><h3>June 20th, 2014</h3></div> <span onclick='return playVideo("Trailer5","videoPlayback")'>Terms and Conditions may Apply</span><br/> <span onclick='return playVideo("Trailer10","videoPlayback")'>How to Train your Dragon 2</span> <div id='videoPlayback'><iframe width='700' height='430' src='http://www.youtube-nocookie.com/embed/Fkbm8a40TC4?theme=light&version=3&rel=0&ps=blogger&iv_load_policy=3&showinfo=0' frameborder='0' allowfullscreen></iframe></div></br><h3>Movie "in Theaters" Date Shown Here</h3></div> <script type='text/javascript'>function playVideo(a,b){"string"==typeof a&&(a=document.getElementById(a));"string"==typeof b&&(b=document.getElementById(b));b.innerHTML=a.innerHTML;return!1}</script></div>