javascript - 为什么 javascript 无法识别我的全局变量？

Question

这个问题已经有答案了:

Why does jQuery or a DOM method such as getElementById not find the element? (7 个回答)

已关闭 8 年前。

我设置一个等于图像的变量，然后在函数中调用它。这不起作用，因为根据 javascript 错误控制台，它不会将图像变量识别为除 null 之外的任何内容

var image = document.getElementById("gc");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */
var image_tracker = 1

function change() {
    if (image_tracker == 1) {
        image.src = "IMG_1267.jpg"
        image_tracker = 2
    } else if (image_tracker == 2) {
        image.src = "IMG_1239.jpg"
        image_tracker = 3
    } else {
        image.src = "IMG_1263.jpg"
        image_tracker = 1
    }
}

但是这工作正常

var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */
var image_tracker = 1

function change() {

    var image = document.getElementById("gc");

    if (image_tracker == 1) {

        image.src = "IMG_1267.jpg"
        image_tracker = 2
    } else if (image_tracker == 2) {
        image.src = "IMG_1239.jpg"
        image_tracker = 3
    } else {

        image.src = "IMG_1263.jpg"
        image_tracker = 1
    }

}

var timer = setInterval('change()', 3000);

Answer 1

在您的代码中，您的 JavaScript 会立即加载，甚至在 DOM 完全加载之前也是如此。当它尝试搜索 #gc 时，它找不到它，因为它没有加载到 DOM 中。

解决方案是在页面完全加载时设置 image 变量。例如。

var image;

window.onload = function() {
    image = document.getElementById("gc");
}

function change() {
    ....