Как реализовать такое переключение блоков на чистом JS?

Question

[Максим js]

Подскажите как сделать такое же переключение блоков регистрации на читом javascript https://codepen.io/AlexisBertin/pen/qOMegE тут сделано через angular
интересно понять как это может работать на чистом js

Answer 1

[drawnofmymind]

document.querySelector('.buy').addEventListener('click', (e)=>{
  if(e.target){
    document.querySelector('.login-content-signin').style.opacity="0"
     document.querySelector('.login-content-signin').style.zIndex="-1"
        document.querySelector('.login-content-signup').style.opacity="1"
     document.querySelector('.login-content-signup').style.zIndex="1"
  }
})

document.querySelector('.hi').addEventListener('click', (e)=>{
  if(e.target){
    document.querySelector('.login-content-signin').style.opacity="1"
     document.querySelector('.login-content-signin').style.zIndex="1"
        document.querySelector('.login-content-signup').style.opacity="0"
     document.querySelector('.login-content-signup').style.zIndex="-1"
  }
})
      <button ng-click="showSignIn=false" class="hi">Login</button>
      <button ng-click="showSignIn=true" class="buy">Sign Up</button>

Comments

[Максим js]

Спасибо), а можно эти переключения реализовать одной функцией с условиями? пока активна одна вторая прячется, и наоборот?

[drawnofmymind]

Ага,это тебе домашние задание)

[drawnofmymind]

Максим js, Если не сможешь,напиши,сделаем)

[Максим js]

drawnofmymind,

let logIn = document.querySelector('.login-content-signin');
let signUp = document.querySelector('.login-content-signup');

document.querySelector('.buy').addEventListener('click', (e)=>{
  if(e.target){
    logIn.style.opacity="0";
    logIn.style.zIndex="-1";
    signUp.style.opacity="1";
    signUp.style.zIndex="1";
  }
  else {
    logIn.style.opacity="1";
    logIn.style.zIndex="1";
    signUp.style.opacity="0";
    signUp.style.zIndex="-1";
  }
})

почему-то не работает)

[drawnofmymind]

let logIn = document.querySelector('.login-content-signin');
let signUp = document.querySelector('.login-content-signup');

document.querySelectorAll('.buy').forEach((item,index)=>{
  item.addEventListener('click', () => {
    if(index == 1){
      logIn.style.opacity="0";
      logIn.style.zIndex="-1";
      signUp.style.opacity="1";
      signUp.style.zIndex="1";
    }else{
       logIn.style.opacity="1";
      logIn.style.zIndex="1";
      signUp.style.opacity="0";
      signUp.style.zIndex="-1";
    }
  })
})

      <button class="buy"ng-click="showSignIn=false">Login</button>
      <button class="buy"ng-click="showSignIn=true">Sign Up</button>

[drawnofmymind]

Максим js, Понимаешь что тут происходит?

[Максим js]

drawnofmymind,
мы получили массив элементов .buy и запускаем функцию по клику , один раз для каждого элемента массива
вот только параметры index,item не понял что к чему
в условии index == сравнивется с 1 это типа true?

[drawnofmymind]

item служит в качестве одной взятой кнопки.
по index-у мы сравниваем.
Грубо говоря:
кнопка[0] == 0?
иначе кнопка[1] == 1

в условии index == сравнивется с 1 это типа true? - да)

[Максим js]

drawnofmymind, Спасибо)