使用按钮更改 src
Changing src with a button
我有一个 YouTube iframe。带名称选择。
HTML :
<div class="video">
<iframe width="420" height="315" name="selection"
src=""
frameborder="0" allowfullscreen></iframe>
</div>
<a onclick="changeMusic()" href="javascript:void(0);" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-step-forward"></span> Next Song </a>
当我单击按钮时,我想在 javascript 中递增一个整数,以便 iframe 的 src 随数组索引而变化。
JS :
list[0] = "https://www.youtube.com/embed/mQ1huZuZVNA"
list[1] = "https://www.youtube.com/embed/qZH5aY48BP8"
var max = 1;
var min = 0;
var x = 0;
//Math.floor(Math.random() * (max - min + 1)) + min;
document.getElementsByName("selection").src = list[x];
function changeMusic() {
if(x<max){
x = 1;
document.getElementsByName("selection").src = list[x];
}
else
{
x = 0;
document.getElementsByName("selection").src = list[x];
}
}
首次加载页面时,我想将第一个索引显示为列表[0],以便在 iframe 中播放 youtube link。每当有人点击一个按钮时,数组索引就会从 0 变为 1 或从 1 变为 0,这样视频 link 就会发生变化。
但它甚至没有从数组中加载第一个 link。
Define list
as array
: var list = [];
There is syntax error as correct syntax is getElementsByName
not getElementByName
. The getElementsByName()
method returns a collection of all elements in the document with the specified name
var list = [];
list[0] = "https://www.youtube.com/embed/mQ1huZuZVNA";
list[1] = "https://www.youtube.com/embed/qZH5aY48BP8";
var max = 1;
var min = 0;
var x = 0;
var selectionElem = document.getElementsByName("selection")[0];
selectionElem.src = list[x];
function changeMusic() {
if (x < max) {
x = 1;
selectionElem.src = list[x];
}
else {
x = 0;
selectionElem.src = list[x];
}
}
<div class="video">
<iframe width="420" height="315" name="selection" src="" frameborder="0" allowfullscreen></iframe>
</div>
<a onclick="changeMusic()" href="javascript:void(0);" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-step-forward"></span> Next Song </a>
您需要访问 getElementsByName
返回的集合的第一个元素
document.getElementsByName("selection")[0].src = list[x]
它总是returns一个节点列表(因为可以有更多同名元素)
您的代码经过 2 次更改后工作正常。
你必须声明你的数组 list
:
var list = [];
您必须 select 第一个元素 return 由 getElementsByName()
编辑,因为它将 return 所有名称为 [= 的元素16=] :
document.getElementsByName("selection")[0].src = list[x];
希望对您有所帮助。
var list = [];
list[0] = "https://www.youtube.com/embed/mQ1huZuZVNA"
list[1] = "https://www.youtube.com/embed/qZH5aY48BP8"
var max = 1;
var min = 0;
var x = 0;
document.getElementsByName("selection")[0].src = list[x];
changeMusic = function () {
if(x<max){
x = 1;
document.getElementsByName("selection")[0].src = list[x];
}
else{
x = 0;
document.getElementsByName("selection")[0].src = list[x];
}
}
<div class="video">
<iframe width="420" height="315" name="selection"
src=""
frameborder="0" allowfullscreen></iframe>
</div>
<a onclick="changeMusic()" href="javascript:void(0);" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-step-forward"></span> Next Song </a>
我有一个 YouTube iframe。带名称选择。
HTML :
<div class="video">
<iframe width="420" height="315" name="selection"
src=""
frameborder="0" allowfullscreen></iframe>
</div>
<a onclick="changeMusic()" href="javascript:void(0);" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-step-forward"></span> Next Song </a>
当我单击按钮时,我想在 javascript 中递增一个整数,以便 iframe 的 src 随数组索引而变化。
JS :
list[0] = "https://www.youtube.com/embed/mQ1huZuZVNA"
list[1] = "https://www.youtube.com/embed/qZH5aY48BP8"
var max = 1;
var min = 0;
var x = 0;
//Math.floor(Math.random() * (max - min + 1)) + min;
document.getElementsByName("selection").src = list[x];
function changeMusic() {
if(x<max){
x = 1;
document.getElementsByName("selection").src = list[x];
}
else
{
x = 0;
document.getElementsByName("selection").src = list[x];
}
}
首次加载页面时,我想将第一个索引显示为列表[0],以便在 iframe 中播放 youtube link。每当有人点击一个按钮时,数组索引就会从 0 变为 1 或从 1 变为 0,这样视频 link 就会发生变化。
但它甚至没有从数组中加载第一个 link。
Define
list
asarray
:var list = [];
There is syntax error as correct syntax is
getElementsByName
notgetElementByName
. ThegetElementsByName()
method returns a collection of all elements in the document with the specified name
var list = [];
list[0] = "https://www.youtube.com/embed/mQ1huZuZVNA";
list[1] = "https://www.youtube.com/embed/qZH5aY48BP8";
var max = 1;
var min = 0;
var x = 0;
var selectionElem = document.getElementsByName("selection")[0];
selectionElem.src = list[x];
function changeMusic() {
if (x < max) {
x = 1;
selectionElem.src = list[x];
}
else {
x = 0;
selectionElem.src = list[x];
}
}
<div class="video">
<iframe width="420" height="315" name="selection" src="" frameborder="0" allowfullscreen></iframe>
</div>
<a onclick="changeMusic()" href="javascript:void(0);" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-step-forward"></span> Next Song </a>
您需要访问 getElementsByName
document.getElementsByName("selection")[0].src = list[x]
它总是returns一个节点列表(因为可以有更多同名元素)
您的代码经过 2 次更改后工作正常。
你必须声明你的数组
list
:var list = [];
您必须 select 第一个元素 return 由
getElementsByName()
编辑,因为它将 return 所有名称为 [= 的元素16=] :document.getElementsByName("selection")[0].src = list[x];
希望对您有所帮助。
var list = [];
list[0] = "https://www.youtube.com/embed/mQ1huZuZVNA"
list[1] = "https://www.youtube.com/embed/qZH5aY48BP8"
var max = 1;
var min = 0;
var x = 0;
document.getElementsByName("selection")[0].src = list[x];
changeMusic = function () {
if(x<max){
x = 1;
document.getElementsByName("selection")[0].src = list[x];
}
else{
x = 0;
document.getElementsByName("selection")[0].src = list[x];
}
}
<div class="video">
<iframe width="420" height="315" name="selection"
src=""
frameborder="0" allowfullscreen></iframe>
</div>
<a onclick="changeMusic()" href="javascript:void(0);" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-step-forward"></span> Next Song </a>