Javascript 添加第二个模态框后，模态框将停止正常工作

我有两个按钮，一个用于登录，一个用于登录。我创建了两个不同的模式框，其中包含用于登录和登录的表单。不幸的是，由于某种原因，当我添加第二个模态框时，第一个模态框在我看到它外部单击时就停止关闭。我已经创建了一个代码笔，你可以自己看

如果单击“注册”，然后单击其他任何位置，则模式框将关闭，不幸的是，单击“登录”时不会发生这种情况

var logInModal=document.getElementById（'logInModal'）；
var logInButton=document.getElementById（“登录”）；
logInButton.onclick=函数（）{
logInModal.style.display=“block”；
}
window.onclick=函数（事件）{
if（event.target==logInModal）{
logInModal.style.display=“无”；
}
}
var signUpModal=document.getElementById（'signUpModal'）；
var signUpButton=document.getElementById（“注册”）；
signUpButton.onclick=函数（）{
signUpModal.style.display=“block”；
}
window.onclick=函数（事件）{
if（event.target==signUpModal）{
signUpModal.style.display=“无”；
}
}

.modal{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}

注册
登录

SSSSS
SSSSS

您的第一个事件侦听器被覆盖。来解决这个问题

请尝试以下代码

    var logInModal = document.getElementById('logInModal');
    var logInButton = document.getElementById("logIn");

    logInButton.onclick = function() {
        logInModal.style.display = "block";
    }

    var signUpModal = document.getElementById('signUpModal');
    var signUpButton = document.getElementById("signUp");

    signUpButton.onclick = function() {
        signUpModal.style.display = "block";
    }

    window.onclick = function(event) {
        if (event.target == signUpModal) {
            signUpModal.style.display = "none";
        } else if (event.target == logInModal) {
             logInModal.style.display = "none";      
        }
    }

---

这是更新后的代码笔。

您不需要定义windows.onclick方法两次

var logInModal = document.getElementById('logInModal');
var logInButton = document.getElementById("logIn");

logInButton.onclick = function() {
    logInModal.style.display = "block";
}

var signUpModal = document.getElementById('signUpModal');
var signUpButton = document.getElementById("signUp");

signUpButton.onclick = function() {
    signUpModal.style.display = "block";
}

window.onclick = function(event) {
    if (event.target == logInModal) {
        logInModal.style.display = "none";
    }
    else if (event.target == signUpModal) {
        signUpModal.style.display = "none";
    }
}

---

您的问题可以简化为：

var foo；foo=“A”；foo=“B”；console.log（foo）-为什么不打印
A
？你能详细说明一下吗？我还是不知道我的错误在哪里。天啊，我真傻。梅尔波默尼说的话现在有道理了。