当变量定义非常明确时，事件侦听器抛出 "Undefined" 错误

Question

本质上，我正在为 html5 视频元素创建自定义视频控制栏。除了我使用范围输入元素的搜索栏外，一切正常。

现在，对于控制栏中的每个元素，我将其分配给 js 函数中的一个变量，该函数在 window 加载和添加事件侦听器时调用。像这样：

function handleWindowLoad() {
    var video = document.getElementById ("video");
    var playPause = document.getElementById ("playPause");
    var muteUnmute = document.getElementById ("muteUnmute");    
    var fullScreen = document.getElementById ("toggleFullscreen");
    var scrubSlider = document.getElementById ("seekBar");
    playPause.addEventListener ("click", togglePlay);
    muteUnmute.addEventListener("click", toggleMute);
    fullScreen.addEventListener("click", toggleFullscreen);
    scrubSlider.addEventListener("change", scrubVideo);
}

所有的事件处理程序都工作顺利。

例如：

function togglePlay() {
if (video.paused) {
    video.play();
    playPause.innerHTML = "Pause";
}
else {
    video.pause();
    playPause.innerHTML = "Play";
}
}

工作正常。

然而 scrubSlider 事件处理程序，scrubVideo():

function scrubVideo() {
var scrubTime = video.duration * (scrubSlider.value/100);
video.currentTime = scrubTime;  
}

引发 "scrubSlider undefined" 错误。

事件侦听器工作正常，因为 scrubVideo() 在预期时被调用但在 handleWindowLoad() 函数之外我无法访问 scrubSlider。我尝试过的解决此错误的唯一方法是使用 document.getElementById 而不是 var 或通过全局声明 scrubSlider。

我觉得这很有趣，因为 scrubSlider 和其他元素之间的唯一区别是所讨论的元素是 <input> 而不是 <button> 和事件被监听的是 "change" 而不是 "click".

此错误是由于 HTML 元素的某种固有功能还是我忽略的更微不足道的原因造成的？

Here's a JSFiddle

Answer 1

如果我没看错的话，你在 handleWindowLoad 函数中定义了 scrubSlider（这使得它只在那个范围内可用）并且你尝试在 scrubVideo 中访问它。要使其正常工作，请执行以下操作：

var scrubSlider;
function handleWindowLoad() {
    scrubSlider = document.getElementById ("seekBar");
    ...
}

编辑：有趣的是我不知道：如果您订阅 DOMContentLoaded 事件，显然您可以通过 javascript 中的 id 到达 html 元素。 https://jsfiddle.net/22oqpcLu/1/

因此，这就是您在访问 video 变量时不会得到 undefined 的原因。我猜你可以访问 scrubSlider 作为 seekBar.

当变量定义非常明确时，事件侦听器抛出 "Undefined" 错误

Event listener throwing "Undefined" error when variable is quite clearly defined

html

javascript

scope

addeventlistener