Question

我正在一个网站上工作，进入它的人必须在加载时提示图像。此图像就像任何图像一样，但显然它不会显示。我有一个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>

Answer 1

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

请注意删除＆＃34; var＆＃34;的更改在函数中，使用＆＃34; ===＆＃34;而不是＆＃34; =＆＃34;在你的比较中。

图像不会显示在onLoad功能上

1 个答案: