javascript - 图片不会在 onLoad 函数中显示

标签 javascript html 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';
}
#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/

相关文章:

javascript - 从悬停更改为单击?

javascript - rails : acts_as_commentable_with_threading children's comment form not working

javascript - 使用 jQuery selectable 选择连续的元素

jquery - 创建全屏图片库的简单方法是什么

javascript - 引用 .click() 仅在短时间内显示目的地

javascript - 使用 javascript 的 OAuth 2.0 授权码流程

html - 如何相对于前一个 block 在一行中定位内联 block ?

javascript - 将选项值更改为 href?

html - 使用 Bootstrap img-responsive 类悬停时的 z-index

html - 背景图像被切断(两个图像并排)