Toggle for different height and width in JavaScript

Question

I want to make a toggle which toggles the height and the width of an element whenever it's clicked.

<div class="flexbox-container" id="main" onclick="staybig()">Create Account</div>

.flexbox-container {
    transition: height 0.5s, width 0.5s;
    height: 100px;
    width: 100px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-color: #492ee4;
    border-radius: 50%;
    display: flex;
    margin: auto;
    margin-top: 200px;
}

let isBig = false
if (isBig) {
    main.style.width = "100px";
    main.style.height = "100px";
    isBig = false
} else {
    main.style.width = "113px";
    main.style.height = "113px";
    isBig = true
}

This doesn't work as expected. Can someone help me out, please? Thank you

Answer 1

It looks like your code is not updating the isBig variable correctly. You need to move the isBig variable outside of the click event handler so that it retains its state between clicks. Here's a corrected version of your code:

let isBig = false;
const main = document.getElementById('yourElementId'); // Replace 'yourElementId' with the actual ID of your element

main.addEventListener('click', function() {
    if (isBig) {
        main.style.width = "100px";
        main.style.height = "100px";
        isBig = false;
    } else {
        main.style.width = "113px";
        main.style.height = "113px";
        isBig = true;
    }
});

Answer 2

From your description of the problem and the code you provided, it would seem that you define isBig inside the event handler. This means what every time the event fires you re-set the state of isBig back to false. Therefore the element can only be made larger.

To fix this you need to define isBig outside of the event handler:

let isBig = false

function staybig() {
  if (isBig) {
    main.style.width = "100px";
    main.style.height = "100px";
    isBig = false
  } else {
    main.style.width = "113px";
    main.style.height = "113px";
    isBig = true
  }
}

.flexbox-container {
  transition: height 0.5s, width 0.5s;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  background-color: #492ee4;
  border-radius: 50%;
  display: flex;
  margin: auto;
}

<div class="flexbox-container" id="main" onclick="staybig()">Create Account</div>

That being said, a much better approach would be to define the styles in CSS and then just toggle() that class in the event handler, which you should bind in JS, not HTML. Here's a working example with those fixed applied:

const main = document.querySelector('#main');

main.addEventListener('click', () => main.classList.toggle('large'));

.flexbox-container {
  transition: height 0.5s, width 0.5s;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  background-color: #492ee4;
  border-radius: 50%;
  display: flex;
  margin: auto;
}

#main.large {
  width: 113px;
  height: 113px;
}

<div class="flexbox-container" id="main">Create Account</div>