使用按钮更改src

Question

我有一个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&nbsp; </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链接。无论何时点击某个按钮，都会将数组索引0更改为1或1，以便视频链接发生更改。

但它甚至不会加载阵列中的第一个链接。

Answer 1

2次更改后，您的代码正常工作。

1. 你必须声明你的阵列list：

   var list = []; 
   

2. 你必须选择由getElementsByName()返回的第一个元素，因为它会通过名称selection返回的所有元素：

   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&nbsp; </a>

Answer 2

定义list为array：var list = [];

有语法错误，因为正确的语法是getElementsByName不getElementByName。该getElementsByName()方法返回的所有元素的集合，在文档中使用指定的名称

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() { 
 
\t if (x < max) { 
 
\t \t x = 1; 
 
\t \t selectionElem.src = list[x]; 
 
\t } 
 
\t else { 
 
\t \t x = 0; 
 
\t \t selectionElem.src = list[x]; 
 
\t } 
 
}

<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&nbsp; </a>

Answer 3

您需要访问集合由getElementsByName

document.getElementsByName("selection")[0].src = list[x] 

返回的第一个元素

它总是返回一个节点列表（因为可以有更多的同名元素）