i am using this code to change the images on clicking it again and again :

```
    <!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;
    }
}

```

but it is not working.

And , when i put the `let x = document.getElementById('goku');`  inside the function , it is working fine. If this is because of the scope of the variable , then it should also applied on `click` variable but `click` variable is working fine.
Do you have any explanation for this behaviour ?