Изменение src с помощью кнопки

Question

У меня есть iframe 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 с индексом массива.

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], так что играет связь в юности фрейма. всякий раз, когда кто-то нажимает кнопку, изменяется индекс массива от 0 до 1 или от 1 до 0, чтобы изменить ссылку на видео.

Но он даже не загружает первую ссылку из массива.

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] 

Он всегда возвращает список узлов (так как может быть больше элементов с тем же именем)