Код сокращения - несколько входов / видео для одной функции - PullRequest
Новая
       11

Код сокращения - несколько входов / видео для одной функции

0 голосов
/ 25 марта 2019

Я хочу сократить свой код, поскольку я повторяю одну и ту же функцию для каждой кнопки и видео, но теряюсь, пытаясь понять, как заставить вещи запускаться через одну и ту же функцию при нажатии.Прямо сейчас я использую onclick в HTML, но я хотел бы, чтобы код использовал также eventListener и только Javascript.

Я пытался использовать циклы for для кнопки и видео, но я признаю, что не знаю, что именно я делаю.

<script>

    // function for "stop"
    var vid1 = document.getElementById("video1");
        vid1.style.display = "none";
    var img1 = document.getElementById("button1");

        function vidToggle1() {
            img1.style.display = "none";
            vid1.style.display = "block";
            vid1.play();
        }
        vid1.onended = function() {
            vid1.style.display = "none";
            img1.style.display = "block";
        }

    // function for "more"
    var vid2 = document.getElementById("video2");
        vid2.style.display = "none";
    var img2 = document.getElementById("button2");

        function vidToggle2() {
            img2.style.display = "none";
            vid2.style.display = "block";
            vid2.play();
        }
        vid2.onended = function() {
            vid2.style.display = "none";
            img2.style.display = "block";
        }

</script>

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

1 Ответ

0 голосов
/ 25 марта 2019

Вы можете просто передать элементы в качестве параметров функции.Например: 

function playVideo(vid, img) {
  img.style.display = "none";
  vid.style.display = "block";
  vid.play();

  vid.onended = function() {
    vid.style.display = "none";
    img.style.display = "block";
    vid.onended = undefined
  }
}


var vid1 = document.getElementById("video1");
vid1.style.display = "none";
var img1 = document.getElementById("button1");

var vid2 = document.getElementById("video2");
vid2.style.display = "none";
var img2 = document.getElementById("button2");

Затем для воспроизведения первого видео вы можете позвонить playVideo(vid1, img1), а для второго playVideo(vid2, img2).

Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать меня вкомментарии.

...