Twitter Bootstrap Question posted in

Why two if statements don't work in one function?-Twitter bootstrap

Working on a function that checks if a user is logged in or out. If logged in, Log In button is removed and Log Out button displays. If current state is logged out, then Log In is displayed and Log Out is removed.

It’s running in two different functions loggedIn(); and loggedOut();. Each function is built out with ternary operators.

Is there a way to combine these into one function that checks for all conditions? Like loggedCheck(); so I don’t have two different functions running.

Just looking to be more efficient and not over-code things. 

isLoggedIn = false;

function loggedIn() {
  isLoggedIn == true ? login.style.display = 'none' : login.style.display = 'block';
}

function loggedOut() {
  isLoggedIn == true ? logout.style.display = 'block' : logout.style.display = 'none';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">




<body onload="loggedIn(); loggedOut();">
  <div class="container py-3">
    <button class="btn btn-md btn-primary" id="login">Log In</button>
    <button class="btn btn-md btn-primary" id="logout">Log Out</button>
  </div>
</body>
Tags:

4

Answers


  1. 0

    You can combine them into a single function and use a ternary for each.

    Two suggestions:

    isLoggedIn = false;

window.onload = () => {
  document.getElementById("login").style.display = isLoggedIn ? 'none' : 'block';
  document.getElementById("logout").style.display = isLoggedIn ? 'block' : 'none';
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container py-3">
  <button class="btn btn-md btn-primary" id="login">Log In</button>
  <button class="btn btn-md btn-primary" id="logout">Log Out</button>
</div>
    Login or Signup to reply.
  2. 0

    there is more simple to do:

    with no needs of:
    – onload function
    – bad global var = isLoggedIn 

    const LoginBlock = document.getElementById('LoginBlock')
    , bt_LogIn   = document.getElementById('login')
    , bt_LogOut  = document.getElementById('logout')
    
bt_LogIn.onclick=_=> {
  LoginBlock.classList.add('loginOff')
}

bt_LogOut.onclick=_=>  {
  LoginBlock.classList.remove('loginOff')
}
    #LoginBlock > button#login { display: block; }
#LoginBlock > button#logout { display: none; }

#LoginBlock.loginOff > button#login { display: none; }
#LoginBlock.loginOff > button#logout { display: block; }
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="container py-3" id="LoginBlock" >
    <button class="btn btn-md btn-primary" id="login">Log In</button>
    <button class="btn btn-md btn-primary" id="logout">Log Out</button>
  </div>
</body>

    if you need:

      if (LoginBlock.classList.contains('loginOff')) { // instead of  your global "isLoggedIn"
     // your code
  }
    Login or Signup to reply.
  3. 0

    I adjusted your approach slightly to only using one button and changing it’s textContent appropriately:

    const [btn] = document.getElementsByTagName('button');
let isLoggedIn = false;

btn.onclick = (e) => {
  isLoggedIn = !isLoggedIn;
  btn.textContent = isLoggedIn ? 'Log Out' : 'Log In';
};
    <button>Log In</button>
    Login or Signup to reply.
  4. 0

    You can use a single function like this

    let isLoggedIn = false;

const login = document.getElementById('login')
const logout = document.getElementById('logout')

login.addEventListener('click', handleLogin)
logout.addEventListener('click', handleLogin)

function handleLogin() {
  isLoggedIn = !isLoggedIn;

  if (!isLoggedIn) {
    login.style.display = 'block';
    logout.style.display = 'none';
    return
  }
  
  login.style.display = 'none';
  logout.style.display = 'block';
}
    <body onload="handleLogin();">
  <div class="container py-3">
    <button class="btn btn-md btn-primary" id="login">Log In</button>
    <button class="btn btn-md btn-primary" id="logout">Log Out</button>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search