Замена при помощи innerHTML

182
20 марта 2018, 00:07

Всем привет,есть блок с видео,как с помощью innerHTML !! заменить нужно именно src елемента ,есть массив с ссылками,которые нужно вставить в елемент и при нажатии на клавишу рандом на странице должно появиться рандомное видео 

<button id="click" onclick=clicker(); style="display: none" >Random</button>
<div id="random_elem">
    <iframe src="https://topkino.club/embed/943779/" width="610" 
 height="370" frameborder="0" allowfullscreen  ></iframe>
    <iframe src="https://topkino.club/embed/1009236/" width="610" 
 height="370" frameborder="0" allowfullscreen  ></iframe>
    <iframe src="https://topkino.club/embed/893988/" width="610" 
 height="370" frameborder="0" allowfullscreen  ></iframe>
</div>
<div class="container"  style="background-color: black; width: 500px; 
height: 500px;">   



 var arr = ["https://topkino.club/embed/943779/",
      "https://topkino.club/embed/1009236/",
      "https://topkino.club/embed/893988/"]

 function getRandomInt(size)
  {
  return Math.floor(Math.random() * size);
  }
  var video = arr[getRandomInt(arr.length)];
  var random_element = document.getElementById('sd');
    var link = document.createElement('src');
 function clicker(){
  random_element.innerHTML='<iframe src="' + video + '"width="610" 
  height="370" frameborder="0" allowfullscreen style="display:block;">';
    element.appendChild(random_element);
   }
Answer 1

document.createElement(tag, [options]) - создает элемент, а не атрибут. Чтобы поменять/добавить атрибут - его нужно назначить. Например:

const button = document.querySelector('button'); 
const container = document.querySelector('.container'); 
const iframe = document.createElement('iframe'); //Создаем элемент 
iframe.className = "yourclass"; //Добавляем к нему необходимый класс(ы) 
container.appendChild(iframe); //вставляем как дочерний элемент к определенному контейнеру 
const links = [ 
	"https://topkino.club/embed/943779/", 
    "https://topkino.club/embed/1009236/", 
    "https://topkino.club/embed/893988/" 
]; 
 
const getRandomInt = (size = links.length) => { 
	return Math.floor(Math.random() * size); 
} 
button.addEventListener('click', () => { 
	iframe.src = links[getRandomInt()]; //переназначаем значение атрибута функцией, которая выдает случайные числа 
})
.yourclass { 
  width: 100%; 
  background: black; 
}
<div class="container"></div> 
<button>Random link</button>

READ ALSO
Разбить программно таблицу на 2 подтаблицы
HTML

Разбить программно таблицу на 2 подтаблицы

ЗдравствуйтеНа вход поступает часть HTML кода

 190
Как взять данные из SELECT-a?
HTML

Как взять данные из SELECT-a?

это код ajaxname: Select name='list' >

 177
Как выравнивать элементы в html?
CSS

Как выравнивать элементы в html?

Всем привет, только учусь писать странички и столкнулся с проблемой: 1Как сделать так , чтобы ячейки формы выровнены вместе с кнопкой? Как...

 228
Возможно ли обтекание flex-элемента?
CSS

Возможно ли обтекание flex-элемента?

Подскажите можно ли заставить остальные элементы flex-контейнера обтекать определенный элемент?

 247