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

Launch Internet Explorer and input variable values (such as ScriptEngineMinorVersion)

What is the process for cancelling an interval when it is disabled in my configuration file?

What is the recommended approach for embedding scripts within Angular templates?

What is the best way to prevent useEffect from triggering when a modal is being rendered?

Unable to display information from a repeated `textarea` in ngRepeat

Utilizing Axios to filter response.data in an API request

Constructing hierarchical objects in JavaScript

What are some strategies for optimizing React performance when managing controlled input from numerous components?

Utilizing JavaScript Callbacks in HTML Image Tags

Is it possible to generate various resolutions of an image simultaneously?

Ways to perform a force click on a span element when clicking on a glyphicon

Querying data with parameters in a client-side rendered application with Next.js

Browsing through a jQuery JSON object in Chrome reveals a dynamic reshuffling of its order

What is the method for accessing a selector within a foreach loop?

The trouble with dynamicHelpers in Nodejs Express

transferring data using react-router

Retrieve the maximum number of slots from a JSON file and implement them into the

Trigger an animation function with JQuery once the first one has finished

Changing the size of circles in text and adjusting the dimensions of SVG elements

Dealing with functions that may not consistently return a promise