CODEWITHSUNDEEP
javascripthtmlcssfunction
vitorr
vitorr

Reputation: 15

onclick function not working(changing style)

I created two modals, one for login, and the other one for registering. Each one has a span which closes the modal on click, but for some reason, only the first modal is closing when i click on it.

I have tried a solution that worked, which is creating two different spans with a function for each one of them, and also extra css code, but that is a lengthy approach which i've learned is not a good practice.

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>

Upvotes: 0

Views: 1928

Answers (3)

Abhishek Kumar
Abhishek Kumar

Reputation: 564

document.querySelector() returns only the first element in the document that matches the CSS selector. You can do like this:

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;
      }

Upvotes: 2

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20934

By using document.querySelector you select the first occurrence of the element you query. In your case you have two .close buttons. Use document.querySelectorAll instead to select all the elements that are found by the query.

let fechaModals = document.querySelectorAll(".close");

And then loop over each .close button to add the event listener.

fechaModals.forEach(fechaModal => {
   fechaModal.addEventListener('click', function(event) {
       modal.style.display = "none";
       modalCadastro.style.display = "none";
       event.preventDefault();
   });
});

Upvotes: 1

med morad
med morad

Reputation: 509

I think document.querySelector returns the first element that match selector. so only the first one with .close will work. you have to do this with two different ids

Upvotes: 0

Related Questions