javascript - .addEventListener 不工作

Question

我的代码相当简单。 .addEventListener 不适用于“点击”或“更改”。我必须将“onclick”放入 HTML 中，但据我所知，HTML 中没有“onChange”事件。我正在尝试制作一个自定义视频播放器，但搜索 slider 无法正常工作。我想知道如何使 .addEventListener 工作？ (p.s.，在这个问题之前它也不起作用) HTML:

<div id="video_player_box">
            <video id="my_video" controls autoplay>
                <source src="/videos/video.mp4">
            </video>
            <div id="video_control_bar">
                <button id="playpausebutton" onclick="playPause()">Pause</button>
                <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
            </div>
        </div>

和JS:

var vid, playBtn, seekslider;

            function initPlayer() {
                vid = document.getElementById("my_video");
                playBtn = window.getElementById("playpausebutton");
                seekslider = window.getElementById("seekslider");

                seekslider.addEventListener("change", vidSeek, false);
            }

            window.onload = initPlayer;

            function playPause() {

                if (vid.paused) {
                    vid.play();
                    playBtn.innerHTML = "Pause";
                } else {
                    vid.pause();
                    playBtn.innerHTML = "Play";
                }
            }
            function vidSeek() {
                var seekTo = vid.duration * (seekslider.value / 100);
                vid.currentTime = seekTo;
            }

Answer 1

使用以下代码修复您的 js 代码:

var vid, playBtn, seekslider;

        function initPlayer() {
            vid = document.getElementById("my_video");
            playBtn = document.getElementById("playpausebutton");
            seekslider = document.getElementById("seekslider");
            seekslider.addEventListener("change", vidSeek, false);
        }

        window.onload = initPlayer;
        function playPause() {
            if (vid.paused) {
                vid.play();
                playBtn.innerHTML = "Pause";
            } else {
                vid.pause();
                playBtn.innerHTML = "Play";
            }
        }

        function vidSeek() {
            var seekTo = vid.duration * (seekslider.value / 100);
            vid.currentTime = seekTo;
        }