时间戳

首页 > 解决方案 > 为什么变量在函数内部工作，但当它放在函数外部时却没有，尽管它具有全局范围？

javascript - 为什么变量在函数内部工作，但当它放在函数外部时却没有，尽管它具有全局范围？

问题描述

我正在使用此代码一次又一次地更改图像：

    <!DOCTYPE html>
<head>
    
    <script src="C:\Users\Hp\Desktop\light bulb\js.js"></script>
</head>
<body>

    <div>
        <img id="goku" src="C:/Users/Hp/Desktop/normal goku.png" onclick="goku()">
    </div>
</body>





<!--javascript code-->
let click = 1;
let x = document.getElementById('goku');
function goku() {
    
    switch(click)
    {
        case 1 :
            x.src = "C:/Users/Hp/Desktop/normal goku.png";click++;break;
        case 2 :
            x.src = "C:/Users/Hp/Desktop/super saiyan goku.png";click++;break;
        case 3 : 
        x.src = "C:/Users/Hp/Desktop/super saiyan 3.jpg";click++;break;
        case 4 : 
        x.src = "C:/Users/Hp/Desktop/super saiyan blue.jpg";click=1;break;
    }
}

但它不工作。

而且，当我把 let x = document.getElementById('goku'); 函数放在里面时，它工作正常。如果这是因为变量的范围，那么它也应该应用于click变量，但click变量工作正常。你对这种行为有什么解释吗？

标签： javascriptvariablesdomscope

解决方案

这是因为您的脚本在加载正文内容之前运行，您可以通过像这样更改 html 内容来修复它

<!DOCTYPE html>
<head></head>
<body>
    <div>
        <img id="goku" src="C:/Users/Hp/Desktop/normal goku.png" onclick="goku()">
    </div>
    <script src="C:\Users\Hp\Desktop\light bulb\js.js"></script>
</body>

或者你可以像这样在函数内部定义 x

let click = 1;
function goku(e) {
    let x = e.target
    switch(click)
    {
        case 1 :
            x.src = "C:/Users/Hp/Desktop/normal goku.png";
            click++;
            break;
        case 2 :
            x.src = "C:/Users/Hp/Desktop/super saiyan goku.png";
            click++;
            break;
        case 3 : 
            x.src = "C:/Users/Hp/Desktop/super saiyan 3.jpg";
            click++;
            break;
        case 4 : 
            x.src = "C:/Users/Hp/Desktop/super saiyan blue.jpg";
            click=1;
            break;
    }
}

推荐阅读