为什么该变量在 function 内部工作，但当它放在 function 外部时却没有工作，尽管它具有全局 scope？
[英]why the variable is working inside the function but not when it is placed outside the function though it has global scope?
问题描述
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');而且，当我把let x = document.getElementById('goku'); inside the function, it is working fine.在 function 内部，它工作正常。 If this is because of the scope of the variable, then it should also applied on click variable but click variable is working fine.如果这是因为变量的 scope，那么它也应该应用于click变量，但click变量工作正常。 Do you have any explanation for this behaviour?你对这种行为有什么解释吗？
2 个解决方案
解决方案1
0 2021-03-14 12:11:48
this because your script runs before body content load you can fix it with changing html content like this这是因为您的脚本在正文内容加载之前运行，您可以像这样更改 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>
or you can define x inside the function like this或者您可以像这样在 function 中定义 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;
}
}
解决方案2
0 2021-03-14 12:16:27
The script is executed before the img element is added to the document.该脚本在将img元素添加到文档之前执行。
If let x = document.getElementById('goku') is outside the function, the element does not exist yet when that line is executed.如果let x = document.getElementById('goku')在 function 之外，则执行该行时该元素还不存在。 If it is inside the function, the line is executed when the button is clicked, thus long after the element has been added into the document.如果它在 function 内部，则在单击按钮时执行该行，因此在将元素添加到文档中之后很长时间。
You may move the script tag at the end of <body> (just after </div> ), or wait until the document is ready to call getElementById .您可以将script标签移到<body>的末尾（就在</div>之后），或者等到document准备好调用getElementById 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.