Question

编辑：：感谢所有尝试帮助我的人。我感谢小伙伴们。

我更改了window.onload，并在其中插入了两个事件监听器。之后，我想到了@Ito Pizarro的想法，并以自己的方式实现了它。

结果如下：

function openDoor() {
var x_1 = document.getElementById('img1');
var x_2 = document.getElementById('img2');
is_visible = (x_1.style.visibility == "hidden");

if (is_visible) {
    x_1.style.visibility = "visible";
}
else {
    x_2.style.visibility = "hidden";
}}

我也为closeDoor()函数做了同样的事情。 编辑结束

我创建一个带有两个按钮的HTML页面。单击每个按钮都有其用途。第一个将显示打开的门的图像。第二个按钮将显示关门的图像。加载页面后，不会显示图像。仅当单击其按钮时，它们才会出现。

试图使用全局布尔创建嵌套的if语句，以使其无限运行。

还尝试了for＆while循环。

但是我是编程新手，我有点挣扎。

window.onload = function () {
    document.getElementById('OpenDoor').addEventListener("click", function () { openDoor() })
}

window.onload = function () {
    document.getElementById('CloseDoor').addEventListener("click", function () { closeDoor() })
}


function openDoor(){
    document.getElementById('img1').style.visibility = "visible";
}

function closeDoor(){
    document.getElementById('img2').style.visibility = "visible";
}

代码中存在两个问题：

我加载页面并单击“关闭门”按钮，然后出现关闭的门图像。如果我决定按下“开门”按钮再次打开门，那就不会了。
我加载页面，然后首先单击“开门”按钮。打开门图像出现，并且如果我单击“关闭门”按钮，该图像也出现，但是我无法通过重新单击“打开门”以重新打开它来重复该过程。

Answer 1

您两次在onload事件上关联一个函数。这样一来，就永远不会触发第一次离婚。

应该更像是：

window.onload = function () {
    document.getElementById('OpenDoor').addEventListener("click", function () { openDoor() })
    document.getElementById('CloseDoor').addEventListener("click", function () { closeDoor() })
}

如果您有想要的答案，别忘了验证答案

Answer 2

编辑：除了lucien-dulac关于window.onload的观点之外……

您的两个事件处理程序似乎对两个单独元素之一执行了一件事情。

openDoor()仅会显示#img1。
closeDoor()仅会显示#img2。

如果您希望随后单击#OpenDoor或#CloseDoor来更改其各自目标元素的visibility样式，则#OpenDoor控件#img1，{{1 }}控件#CloseDoor-您需要在#img2和openDoor()中编写一个切换开关。

类似...

closeDoor()

HTML按钮仅在重新加载/加载网页时有效

2 个答案: