缩短代码 - 一个功能的多个输入/视频

Question

I want to shorten my code since the I am repeating the same function for each button and video, but I get lost when trying to understand how to make things run through the same function when clicked. Right now I am using onclick in HTML, but I would like for the code to use an eventListener as well and Javascript only.

I have tried using for loops for the button and video, but I will admit that I do not know what exactly it is that I'm doing.

<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>

Right now it the code does what I want, but I just want it shorter. The code is supposed to display the input image and when clicked, it is supposed to play the video clip assigned to that input, then video is to go back to the initial image upon finished playing.

Answer 1

You can just pass elements as function parameters. For example:

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");

Then to play the first video you can call playVideo(vid1, img1) , and for the second playVideo(vid2, img2) .

If you have any questions feel free to ask me in the comments.