javascript - HTML 按钮仅适用于网页重新/加载

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 页面。单击每个按钮时都有其目的。第一个将显示打开的门的图像。第二个按钮将显示关闭门的图像。加载页面时没有显示图像。它们仅在单击按钮时出现。

试图创建一个带有全局 bool 值的嵌套 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";
}

代码中存在两个问题:

1. 我加载页面并单击“关闭门”按钮，关闭的门图像出现。如果我决定通过按下“开门”按钮再次打开门，它不会这样做。

2. 我首先加载页面并点击“开门”按钮。打开的门图像出现，如果我点击“关门”按钮，图像也会出现，但我无法通过重新点击“打开的门”重新打开它来重复该过程。

Answer 1

您在 onload 事件上分配了一个函数两次。通过这样做，将永远不会触发第一个声明。

它应该更像:

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

如果你有你要找的东西，不要忘记验证答案