我在一个网站上工作,进入该网站的人必须在加载图像时得到提示。此图像与任何图像一样,但显然不会显示。我有一个 onLoad 函数和一个 onClick 函数,所以一旦显示图像,用户只需单击图像,理论上它就会消失。 我有一个变量,它从一开始就是“假”,然后一旦页面被加载,它应该变成“真”,然后一旦图像被点击它应该再次变成“假”。这样应该很容易控制图像是否显示。
我不完全确定哪里出了问题,因为我觉得一切都是对的。
这是我的代码。
var popUP = false;
function popUpOpen() {
var popUp = true;
}
function popUpClose() {
var popUp = false;
}
if (popUp = true) {
document.getElementById('popUpStart').style.visibility = 'visible';
} else {
document.getElementById('popUpStart').style.visibility = 'hidden';
}
#popUpStart {
position: absolute;
left: 50%;
top: 50%;
margin-left: -325px;
margin-top: -220px;
z-index: 3;
}
<body onload="popUpOpen()">
<img id="popUpStart" src="popUpOnLoad.png" style="visibility:hidden" onclick="popUpClose()" />
</body>
最佳答案
您真正的问题是检查 popUp 是否为真的代码只运行一次,甚至在 onLoad 发生之前。您可以更改 popUp 的值,但这不会更改图像的可见性。
你想要这样的东西:
var popUp = false;
function updateImage()
{
if (popUp === true) {
document.getElementById('popUpStart').style.visibility='visible';
} else {
document.getElementById('popUpStart').style.visibility='hidden';
}
}
function popUpOpen(){
popUp = true;
updateImage();
}
function popUpClose() {
popUp = false;
updateImage()
}
请注意,在函数中删除“var”并在比较中使用“===”而不是“=”的更改。
关于javascript - 图片不会在 onLoad 函数中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38690054/