使用按鈕更改src

我有一個youtube iframe。隨着名稱選擇。使用按鈕更改src

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，以便視頻鏈接發生更改。

但它甚至不會加載陣列中的第一個鏈接。

來源

2015-10-26 Meric Ozcan

'getElementsByName'？語法錯誤.. – Rayon

@Rayon Dabre我用這個網站http://www.w3schools.com/jsref/met_doc_getelementsbyname。asp –

但你已經使用了'getElementByName'而不是'getElementsByName' – Rayon

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>

來源

2015-10-26 14:57:50

男人謝謝它的作品在片段，但不是在我的電腦。它甚至沒有加載視頻，我複製並粘貼相同的代碼 –

另外我嘗試了空腳本它的工作原理，但它在我的代碼中工作 –

請檢查瀏覽器控制檯中是否有任何錯誤消息。 –

定義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>

來源

2015-10-26 14:52:16 Rayon

我定義了數組但是仍然沒有任何變化我也編輯了問題 –

@RonnieJamesDio，我編輯了代碼。 – Rayon

您需要訪問集合由getElementsByName

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

返回的第一個元素

它總是返回一個節點列表（因爲可以有更多的同名元素）

來源

2015-10-26 14:54:20 BobbyTables

你說得對！ – Rayon

謝謝，但沒有任何改變 –

好吧，代碼作爲證據在這裏證明（http://jsfiddle.net/Lq4boaao/），所以你錯過了什麼 – BobbyTables

使用按鈕更改src

回答

相關問題