Switch between various height and width options using JavaScript

Question

Switch between various height and width options using JavaScript

Is there a way to create a toggle that changes both the height and width of an element when it is 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
}

I have tried implementing this code but it does not produce the expected results. Can anyone provide assistance on how to fix this issue? Thank you.

javascript height width toggle

Answer 1

Answer №1

After reviewing your problem description and the provided code snippet, it appears that you are defining the variable isBig within the event handler. This results in resetting the state of isBig to false every time the event is triggered, causing the element to only grow larger.

To resolve this issue, it is recommended to declare 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>

Alternatively, a more efficient approach would be to define the styles in CSS and simply use toggle() to switch the class in the event handler, which should be bound in JavaScript rather than HTML. Here's an updated example with these improvements made:

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>

Answer 2

After reviewing your problem description and the provided code snippet, it appears that you are defining the variable isBig within the event handler. This results in resetting the state of isBig to false every time the event is triggered, causing the element to only grow larger.

To resolve this issue, it is recommended to declare 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>

Alternatively, a more efficient approach would be to define the styles in CSS and simply use toggle() to switch the class in the event handler, which should be bound in JavaScript rather than HTML. Here's an updated example with these improvements made:

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>

Answer 3

Answer №2

It seems like there is an issue with the way your code is handling the isBig variable updates. It's important to ensure that the isBig variable is declared outside of the click event handler in order to maintain its state between different clicks. Below is a revised version of your code:

let isBig = false;
const element = document.getElementById('yourElementId'); // Make sure to replace 'yourElementId' with the actual ID of your element

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

Answer 4

It seems like there is an issue with the way your code is handling the isBig variable updates. It's important to ensure that the isBig variable is declared outside of the click event handler in order to maintain its state between different clicks. Below is a revised version of your code:

let isBig = false;
const element = document.getElementById('yourElementId'); // Make sure to replace 'yourElementId' with the actual ID of your element

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

Switch between various height and width options using JavaScript

Answer №1

Answer №2

Similar questions

Troubleshooting MongoDB and Node.js: Issue with updating variables when inserting documents in a loop

Link that causes the regular expression test to hang

Numerous social media sharing buttons conveniently located on a single webpage

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

The feature for sending posts in Angular.js appears to be malfunctioning

The issue of passing a local object from ng-repeat into a directive controller remains unresolved

A Guide to Displaying HTTP Error Messages on the Angular Login Page

Managing PHP and AJAX: Strategies for handling and transmitting error responses

Bootstrap5: Left-aligned Navigation Bar Pills and Right-aligned Text

Using Material UI with React hooks

Allowing domain access when using axios and express

Extracting numbers using regular expressions can be tricky especially when dealing with mixed

What is the procedure to change a matter body's isStatic property to false in matter.js upon pressing a key?

Develop a monitor for an entity that has not been created

What is the best way to transfer an argument from a parsed JSON value to an onclick function?

How to temporarily toggle an event on and off using jQuery

Using React: Implementing conditional checks within the render() method of functional Components

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the