缩短代码 - 多个 inputs/video 用于一个函数

Question

我想缩短我的代码，因为我为每个按钮和视频重复相同的功能，但是当我试图理解如何在点击时通过相同的功能制作东西时我迷路了运行。现在我在 HTML 中使用 onclick，但我希望代码也使用 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>

现在代码可以满足我的要求，但我只希望它更短。该代码应该显示输入图像，点击时，应该播放分配给该输入的视频剪辑，然后视频在播放结束后返回初始图像。

Answer 1

您可以只将元素作为函数参数传递。例如：

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

如果你有任何问题，请随时在评论中问我。

缩短代码 - 多个 inputs/video 用于一个函数

Shortening Code - Multiple inputs/video for one function

javascript

video

input

click