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

Question

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>

Not likely because both conditions are the same. – Millhorn Dec 12 '19 at 18:29 — Millhorn, Dec 12 '19 at 18:29

Mister Jojo · Accepted Answer · 2019-12-12T18:50:29.970

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
  }

Tyler Roper · Answer 2 · 2019-12-12T18:34:12.917

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

Two suggestions:

Use window.onload instead of <body onload="..."> to remove your JavaScript from the HTML (separation of concerns)
Use document.getElementById() to fetch the elements, instead of relying on global variables.

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>

score 1 · Answer 3 · answered Dec 12 '19 at 18:41

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>

score 1 · Answer 4 · answered Dec 12 '19 at 19:11

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>

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

4 Answers4