Onclick & boolean switch-CodePudding

I have tried to make an function with a onclick that when you click it, it will change the value from 'suspended' in true (this is about suspending a website user account)

suspended = false; 
type user = User['suspended'];

function blokkeerFunctie() {
  // get user & user element
  document.getElementById('userInfo') && document.getElementById('blokkeren');
  // blocks user when clicked
  if (document.getElementById('blokkeer')?.addEventListener('click', blokkeerFunctie)) {
    type user = !User['suspended'];
  } else {
    // deblocks user when clicked
    document.getElementById('deblokkeer')?.addEventListener('click', blokkeerFunctie);
    type user = User['suspended'];
  }
  console.log('blokkeerFunctie');
}
blokkeerFunctie();

I thought with !User i will reverse the boolean value from false in true, but that code isn't even read. ▼

'user' is declared but never used.ts(6196)

CodePudding user response：

You shouldn't put event listeners in your conditional if/else in this way. Here's how I would approach what you're trying to accomplish. You will need to add types to these variables, but you'll get the basic logic here.

let User = {
  suspended: true
};
let button = document.querySelector('#suspender');

function setSuspendButton() {
  button.innerText = User['suspended'] ? 'Unsuspend' : 'Suspend';
}

window.addEventListener('load', () => {
  button.addEventListener('click', blokkeerFunctie)
  setSuspendButton();
})

function blokkeerFunctie() {
  User['suspended'] = !User['suspended'];
  setSuspendButton();
}

<button id='suspender'></button>

CodePudding user response：

type user = creates a new type, not a value. It's unused in each branch of the if because you just create a new type, named user which shadows the type of the same name from the parent scope, which is never used by anything.

Furthermore, this line does nothing:

document.getElementById('userInfo') && document.getElementById('blokkeren');

This line gets up to two references to DOM elements, but doesn't save them anywhere, or perform any logic on them.

I think you want something more like this?

const user = {
  name: 'Joe',
  suspended: false
}

function blokkeerFunctie() {
  // block/deblocks user when clicked
  if (document.getElementById('blokkeer')?.addEventListener('click', blokkeerFunctie)) {
    user.suspended = !user.suspended // toggle `suspended` back and forth
  }
  console.log('blokkeerFunctie');
}
blokkeerFunctie();

Working example