当变量被明确定义时，事件监听器抛出“未定义”错误

Question

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

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

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> 并且正在侦听的事件是“更改”而不是“点击”。

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

Here's a JSFiddle

Answer 1

如果我没看错，您可以在 handleWindowLoad 函数中定义 scrubSlider（这使其仅在该范围内可用），然后您尝试在 scrubVideo 中访问它。要使其正常工作，请执行以下操作：

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

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

因此，这就是您在访问video 变量时不会得到未定义的原因。我猜你可以使用seekBar 访问scrubSlider。