Добрый день , столкнулся с проблемой:
Создаю плей лист видеороликов и для смены видео из списка использую такой JS код:
let listVideo = document.querySelectorAll('.video-lsit .vdi');
let mainVideo = document.querySelector('.main-video video');
let title = document.querySelector('.main-video .video__title');
Array.from(listVideo).forEach(video =>{
video.onclick = () =>{
Array.from(listVideo).forEach(vid => vid.classList.remove('active'));
video.classList.add('active')
if(video.classList.contains('active')){
let src = video.children[0].getAttribute('scr');
mainVideo.src = src;
let text = video.children[1].innerHTML;
title.innerHTML = text;
}
};
});
Ошибок в консоли нет и вроде правильно все написано , но на сайте реакции ноль ,то есть при клике на видео из списка оно должно получать класс "active" ( у других элементов убираем этот класс ) + title меняется и само видео
Вот html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PlayList</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<div class="playlist">
<div class="container">
<h3 class="playlist__title">Title</h3>
<div class="playlist__box">
<div class="main-video">
<div class="video">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">01. Video title</h3>
</div>
</div>
<div class="video-lsit">
<div class="vdi active">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">01. Video title</h3>
</div>
<div class="vdi">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">02. Video title</h3>
</div>
<div class="vdi">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">03. Video title</h3>
</div>
<div class="vdi">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">04. Video title</h3>
</div>
<div class="vdi">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">05. Video title</h3>
</div>
<div class="vdi">
<video src="video/3.mp4" controls muted></video>
<h3 class="video__title">06. Video title</h3>
</div>
</div>
</div>
</div>
</div>
<script src="/main.js"></script>
</body>
</html>
CodePen:
https://codepen.io/Bazli/pen/gOKzazJ 
Средний