我有3个带有值的单选按钮：video，music和news。我正在通过单选按钮调用该功能。在我的函数中，我有一个.onclick函数，按钮实际显示iframes。
我已尝试使用onClick，但这也无法使用。
<body>
<div id="inner">
<!--All contents in here-->
<div id="header" align='center' style="margin:0 auto;">
<label for='genre'>Type your genre</label>
<input name="genre" id="genre" type="text" />
<!-- <label for=='genreList'>Or</label>
<select id='genreList' name='genreList' onchange="">
<option id='video' selected='selected' value='video'>Comedy</option>
<option id='music' value='music'>Misc</option>
<option id='news' value='news'>Sport</option>
</select>-->
<input name="type" id='genre1' type="radio" value="video" checked="checked" onfocus="video();" />
<label for='genre1'>Video</label>
<input name="type" id='genre2' type="radio" value="music" onClick='alert("music");' />
<label for='genre2'>Music</label>
<input name="type" id='genre3' type="radio" value="news" />
<label for='genre3'>News</label>
<select id='numVid' name='numVid' onchange="">
<option id='1' value='video'>1</option>
<option id='2' value='1'>2</option>
<option id='3' value='2'>3</option>
<option id='4' value='3'>4</option>
<option id='5' value='4'>5</option>
<option id='6' value='5'>6</option>
<option id='7' selected='selected' value='6'>7</option>
<option id='8' value='7'>8</option>
<option id='9' value='8'>9</option>
<option id='10' value='9'>10</option>
<option id='11' value='10'>11</option>
<option id='12' value='11'>12</option>
</select>
<input type='button' id='displayAll' value='Get Videos' onClick='' />
</div>
<!--End Header-->
<div id="videos"></div>
</div>
<!--End of inner-->
</body>
function video() {
//Input field (genre)
var genre = document.getElementById('genre').value;
genre = genre.toLowerCase();
//Select menu genre choose.
var genreOption = document.getElementById('genreList').value;
//Embeding codes
var embedComedy = new Array('QqhtaHY1yjQ', 'ptYA1k1JPeQ', 'mYHGPUqEOJY', 'mYHGPUqEOJY', 'VY4HObQw5Go', 'DiKCJaBUmRs', 'LAeUtlcETfc', 'xwGERoFtQoM', 'QqhtaHY1yjQ', 'VY4HObQw5Go', '3meqBxtY4dE');
var embedMisc = new Array('hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU');
var embedSport = new Array('cBJyo0tgLnw', 'uIBgWI_BTyM', 'Vs0QoCtvJmk');
var embedDocumentary = new Array('PyQVjlE3zkU', 'bkprsIaoIv0', 'P4ynv-vRHKQ', 'tnpaaVB4XyA');
//Holds embed codes when being looped (total 12).
var videoEmbed = new Array(12); //Holds Embed Codes When Looped
//Select menu value - number of videos.
var numVideos = document.getElementById('numVideos').value;
//Onclick display the embeded videos.
document.getElementById('displayAll').onclick = function() {
if (genre == 'comedy' || genre == 'comedi' || genre == 'com' || genre == 'funny' || genre == 'fun') {
for (var i = 0; i < numVideos; i++) {
videoEmbed[i] += "<iframe width='560' height='315' src='//www.youtube.com/embed/" + embedComedy[i] + "'" + "frameborder='0' allowfullscreen></iframe><br /><hr width='90%'/>";
document.getElementById('videos').innerHTML = videoEmbed;
}
}
}
}
答案 0 :(得分：0)
您应该创建一个类似triggerC（）的函数，并在单选按钮代码中调用它，并且当您调用video（）时，还有许多gelELementByid，它们将null删除。但主要问题是你的onclick函数video（）正在查找但是用于渲染你的视频的代码是document.getElementById（＆＃39; displayAll＆＃39;）。onclick不会被触发。你必须像我使用函数triggerC（）那样明确地调用它。希望这有帮助
function video() {
//Input field (genre)
console.log("hi")
var genre = document.getElementById('genre').value;
genre = genre.toLowerCase();
//Select menu genre choose.
//var genreOption = document.getElementById('genreList').value;
//Embeding codes
var embedComedy = new Array('QqhtaHY1yjQ', 'ptYA1k1JPeQ', 'mYHGPUqEOJY', 'mYHGPUqEOJY', 'VY4HObQw5Go', 'DiKCJaBUmRs', 'LAeUtlcETfc', 'xwGERoFtQoM', 'QqhtaHY1yjQ', 'VY4HObQw5Go', '3meqBxtY4dE');
var embedMisc = new Array('hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU', 'hC3VTgIPoGU');
var embedSport = new Array('cBJyo0tgLnw', 'uIBgWI_BTyM', 'Vs0QoCtvJmk');
var embedDocumentary = new Array('PyQVjlE3zkU', 'bkprsIaoIv0', 'P4ynv-vRHKQ', 'tnpaaVB4XyA');
//Holds embed codes when being looped (total 12).
var videoEmbed = new Array(12); //Holds Embed Codes When Looped
//Select menu value - number of videos.
var numVideos = document.getElementById('numVid').value;
//Onclick display the embeded videos.
function triggerC() {
genre = 'video';
if (genre == 'video' || genre == 'comedi' || genre == 'com' || genre == 'funny' || genre == 'fun') {
console.log(numVideos);
for (var i = 0; i < numVideos; i++) {
console.log(numVideos);
videoEmbed[i] += "<iframe width='560' height='315' src='//www.youtube.com/embed/" + embedComedy[i] + "'" + "frameborder='0' allowfullscreen></iframe><br /><hr width='90%'/>";
document.getElementById('videos').innerHTML = videoEmbed;
}
}
}
document.getElementById('displayAll').onclick = function() {
triggerC()
}
triggerC()
}