.addEventListener不起作用

Question

我的代碼很簡單。 .addEventListener不適用於“點擊”或“更改”。 我必須在HTML內放置“ onclick”，但據我所知，HTML中沒有“ onChange”事件。 我正在嘗試制作自定義視頻播放器，但搜索滑塊無法正常工作。 我想知道如何使.addEventListener工作？ （ps，在這個問題之前也沒有用）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;
        }