使用按钮更改 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];
    }

}

当页面首次加载时，我想将第一个索引显示为 list[0]，以便在 iframe 中播放 youtube 链接。每当有人单击按钮时，数组索引 0 更改为 1 或 1 更改为 0，以便视频链接更改。

但它甚至不加载数组中的第一个链接。

Answer 1

将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() {
	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&nbsp; </a>

Answer 2

你需要访问getElementsByName返回的集合的第一个元素

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

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

Answer 3

您的代码在 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>