Как каждый раз переопределять переменную с помощью for в JS

Question

Всем привет! Буду рад если поможете, очень долго уже сижу с этим.

let video = document.querySelectorAll('.videopleer');

var start = video[0];
for (var i = 0; i < video.length; i++) {
    video[i].addEventListener('click', function () {
        start.classList.remove('start');
        this.classList.add('start');
        start = this;
    })
}

function toggleVideoStatus() {

        if (video.paused) {
            video.play()
            stopBtnImg.src = '@img/controls__stop.png'
            playIntro.style.display = 'none';
            stopIntro.style.display = 'none';
            video.style.borderRadius = '0 40px 0 0px'
            controls.classList.add('controls__active')



        } else {
            video.pause()
            stopIntro.style.display = 'block';
            stopBtnImg.src = '@img/controls__play.png'


        }
    }
  video.addEventListener('click', toggleVideoStatus);

.player {
    width: 500px;
    border-radius: 0 30px 0 0 ;
    position: relative;
    display: flex;
}
.videopleer {
    width: 100%;
    border-radius: 0 40px 0 40px;
}

<div class="player">
        <div class="video">
            <video class="videopleer__first videopleer"
                src="http://video.ted.com/talks/podcast/CraigVenter_2008_480.mp4">
            </video>
            <video class="videopleer__second videopleer" src="/sample-5s.webm">
                
            </video>
        </div>
<div>

У меня есть 2 видеоплеера. 1 работает но со вторым я понял что придется посидеть так как их 2. Почитав я понял что нужно их перебрать и уже через for выбрать то на какой нажимается. Я добился присвоение классов.

Но так как весь код был написан на 1 переменную video(). сейчас ничего не работает из за того что var video = document.querySelectorAll('.videopleer');

Так вот: Как можно после срабатывания for записать результат в переменную и обновлять при каждой итерации

Спасибо огромное заранее, извиняюсь что так много текста. Если нужны будут еще какой то код или Jsfigin то смогу скинуть.

Answer 1

Возможно я не до-конца понял задачу. Просто записывай при клике в переменную start элемент на который произошел клик. Вот решение:

var video = document.querySelectorAll('.videopleer');

for (var i = 0; i < video__all.length; i++) {
    video__all[i].addEventListener('click', function () {
        video__all[0].classList.remove('start');
        video__all[i].classList.add('start');
        toggleVideoStatus(video__all[i])
    })
}

function toggleVideoStatus(video) {
    if (video.paused) {
        video.play()
        stopBtnImg.src = '@img/controls__stop.png'
        playIntro.style.display = 'none';
        stopIntro.style.display = 'none';
        video.style.borderRadius = '0 40px 0 0px'
        controls.classList.add('controls__active')
    } else {
        video.pause()
        stopIntro.style.display = 'block';
        stopBtnImg.src = '@img/controls__play.png'
    }
}

Вот как бы написал я:

let videos = document.querySelectorAll('.videopleer');

videos.forEach((video) => {
    video.addEventListener('click', () => {
        videos.forEach((el) => {
            el.classList.remove('start')
        })

        video.classList.add('start')
        toggleVideoStatus(video);
    })
})

function toggleVideoStatus(video) {
    if (video.paused) {
        video.play()
        stopBtnImg.src = '@img/controls__stop.png'
        playIntro.style.display = 'none';
        stopIntro.style.display = 'none';
        video.style.borderRadius = '0 40px 0 0px'
        controls.classList.add('controls__active')
    } else {
        video.pause()
        stopIntro.style.display = 'block';
        stopBtnImg.src = '@img/controls__play.png'
    }
}

БЛОГ НА HUSL

Как каждый раз переопределять переменную с помощью for в JS

Ответы (1 шт):