使用按钮更改 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&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 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&nbsp; </a>

您需要访问 getElementsByName

返回的集合的第一个元素
document.getElementsByName("selection")[0].src = list[x]

它总是returns一个节点列表(因为可以有更多同名元素)

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

  1. 你必须声明你的数组 list :

    var list = [];
    
  2. 您必须 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&nbsp; </a>