javascript - onclick 功能不起作用(更改样式)

Question

我创建了两个模式，一个用于登录，另一个用于注册。每个都有一个在点击时关闭模态的跨度，但由于某种原因，当我点击它时只有第一个模态关闭。

我已经尝试了一个有效的解决方案，它创建了两个不同的跨度，每个跨度都有一个函数，还有额外的 css 代码，但这是一个冗长的方法，我了解到这不是一个好的做法。

JS

let modal = document.querySelector("#modal-login");

let modalCadastro = document.querySelector("#modal-cadastro");

let abreModal = document.querySelector(".abre-modal");

let abreModalCadastro = document.querySelector(".abre-modal-cadastro");

let fechaModal = document.querySelector(".close");





//MODAL LOGIN

abreModal.onclick = function(){

        modal.style.display = "block";

}

abreModalCadastro.onclick = function(){


        modalCadastro.style.display = "block";

}



fechaModal.onclick = function(){


    modal.style.display = "none";
    modalCadastro.style.display = "none";

}

HTML

    <div id="modal-login">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <p>Login</p>
                    <input type="text" name="">
                    <p>Senha</p>
                    <input type="password" name="">
                    <button class="botao-entra" type="submit">Entrar</button>
                </div>
            </div>

            <div id="modal-cadastro">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <p>Login</p>
                    <input type="text" name="" required="required">

                    <p>E-mail</p>
                    <input type="E-mail" name="" required="required">

                    <p>Senha</p>
                    <input type="password" name="" required="required">
                    <button class="botao-entra" type="submit">Cadastrar</button>
                </div>
            </div>

Answer 1

document.querySelector()仅返回文档中与 CSS 选择器匹配的第一个元素。你可以这样做:

JS

function OpenForm(name){
  if (name === 'login') {
    document.querySelector("#modal-login").style.display = "block";
  } else if (name === 'register') {
    document.querySelector("#modal-cadastro").style.display = "block";
  }
}

function Close(name){
  if (name === 'login') {
    document.querySelector("#modal-login").style.display = "none";
  } else if(name === 'register') {
    document.querySelector("#modal-cadastro").style.display = "none";
  }
}

<div id="modal-login">
      <div class="modal-content">
        <span class="close" onclick="Close('login')">&times;</span>
        <p>Login</p>
        <input type="text" name="">
        <p>Senha</p>
        <input type="password" name="">
        <button class="botao-entra" type="submit">Entrar</button>
      </div>
    </div>
    <div id="modal-cadastro">
      <div class="modal-content">
        <span class="close" onclick="Close('register')">&times;</span>
        <p>Login</p>
        <input type="text" name="" required="required">

        <p>E-mail</p>
        <input type="E-mail" name="" required="required">

        <p>Senha</p>
        <input type="password" name="" required="required">
        <button class="botao-entra" type="submit">Cadastrar</button>
      </div>
    </div>
    <div>
      <button type="button" name="Login" class="abre-modal" onclick="OpenForm('login')">Login</button>
      <button type="button" name="Register" class="abre-modal-cadastro" onclick="OpenForm('register')">Register</button>
    </div>

#modal-login, #modal-cadastro {
        display: none;
      }