1

Всем привет,есть блок с видео,как с помощью 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);
   }
1
  • сделал єто с помощью document.write но тогда я не могу задать стиль елементу,поетому нужно именно через inner HTML либо create Element ,надеюсь на вашу подсказку)
    – Eduard
    18 мар 2018 в 21:13

1 ответ 1

2

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>

4
  • спасибо большое что так быстро ответили,буду изучать createElement,сколько возможностей,я же пытался вставить через innerHTML) недостаточно знаний в этой области,еще раз спасибо)
    – Eduard
    18 мар 2018 в 21:46
  • обязательно прочитайте и про шаблонные строки (string template). Будет очень полезно. Ну и конечно же не забываем про Babel.
    – NeedH8
    18 мар 2018 в 21:51
  • хорошо,спасибо ) хотел еще уточнить,как добавить к iframe атрибут,к примеру allowfullscreen ? elem.setAttribute(name, value) таким образом добавление атрибута происходит ?
    – Eduard
    18 мар 2018 в 22:26
  • 1
    все уже понял,iframe.setAttribute('allowFullScreen', '')
    – Eduard
    18 мар 2018 в 22:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.