使用按钮更改src

Meric Ozcan 发表于 Dev

梅里克·奥兹坎（Meric Ozcan）

我有一个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，以使视频链接更改。

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

扎卡里亚·阿查尔基（Zakaria Acharki）

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

您必须声明数组list：
```
var list = [];
```
您必须选择第一个返回的元素，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。