图像不会显示在onLoad功能上

Dev*_*Liv 1 html javascript css popup web

我正在一个网站上工作,进入它的人必须在加载时提示图像.此图像就像任何图像一样,但显然它不会显示.我有一个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';
}
Run Code Online (Sandbox Code Playgroud)
#popUpStart {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -325px;
  margin-top: -220px;
  z-index: 3;
}
Run Code Online (Sandbox Code Playgroud)
<body onload="popUpOpen()">

  <img id="popUpStart" src="popUpOnLoad.png" style="visibility:hidden" onclick="popUpClose()" />

</body>
Run Code Online (Sandbox Code Playgroud)

Gar*_*rey 5

你真正的问题是,在onLoad发生之前,检查popUp是否为真的代码只运行一次.您可以更改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()
}
Run Code Online (Sandbox Code Playgroud)

请注意,更改了删除函数中的"var",并在比较中使用"==="而不是"=".