Restore original state on various elements using JavaScript

Question

Restore original state on various elements using JavaScript

I recently asked a question about changing the height of images when clicking on them using vanilla JS. A helpful user named Butalin provided me with a working function, but there seems to be an issue - if I click on one image to change its height and then click on another image without returning to the first one, the height of the first image does not revert back to normal as expected. Is there a way to achieve this behavior?

Below is the code I am using:

var element = document.querySelectorAll('.imgclasstosize');

element.forEach(el => {
  el.addEventListener('click', function(event) {
    if (event.target.style.height == '500px') {
      event.target.style.height = '80px';
    } else {
      event.target.style.height = '500px';
    }
  });
});

And here is the HTML code for the images:

<img class="imgclasstosize" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

<img class="imgclasstosize" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

javascript html css for-loop if-statement

Answer 1

Answer №1

The concept referred to by the original poster is known as mutual exclusion. To achieve mutual exclusion, the technique called Event Delegation is utilized in the demonstration below.

Specifics are elaborated in the demonstration provided:

// Reference parent element
const gallery = document.querySelector('.gallery');
// Gather all .img elements into a NodeList
const images = document.querySelectorAll('.img');
// Set parent element as click listener
gallery.onclick = toggleHeight;

// Event handler receives Event Object
function toggleHeight(event) {
  /* .currentTarget
  This Event property determines which
  element is listening for the click event,
  such as .gallery in this case
  */
  const listener = event.currentTarget;
  /* .target
  This Event property determines which 
  element was actually clicked by the user
  within .gallery
  */
  const clicked = event.target;

  /* Event Delegation
  By utilizing Event properties and flow
  control statements like "if", we can specify
  how specific elements should behave when the
  event occurs while excluding others
  */
  /* Delegating...
  1. Verify that the clicked element is
     within .gallery...
  2. Confirm that the clicked element
     has the class: ".img"
  If the user clicks an element that does not meet
  both conditions, nothing will happen.
  */
  if (clicked !== listener) {
    if (clicked.classList.contains('img')) {
      /* Mutual Exclusion
     A behavior where only one object in a group
     can exhibit a certain effect at any given time
      */
      /*
      For each ".img", check if it was clicked
      and toggle the class ".tall" on/off accordingly
      */
      images.forEach(img => {
        if (img === clicked) {
          img.classList.toggle('tall');
        } else {
          img.classList.remove('tall');
        }
      });
    }
  }
  /* 
  Prevent the click event from reaching
  ancestor elements (i.e., stop Event
  Bubbling)
  */
  event.stopPropagation();
};

.gallery {
  width: 90vw;
  height: auto;
  margin: 8px auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.img,
.small {
  max-height: 80px;
  max-width: 20vw;
  margin: 4px auto;
  display: block;
}

.img {
  cursor: pointer;
}

.tall {
  min-height: 500px;
}

figure {
  width: max-content;
  margin: auto 30vw;
}

<section class='gallery'>
  <img class="img" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

  <img class="img" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

  <img class="img" src="https://assets.picspree.com/variants/Q6FeBijP3z1pVPPu9ZrDsebE/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

  <figure>
    <img class='small' src='https://assets.picspree.com/variants/4yZoj6m5FAQkh5vgJbrkrrMC/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d'>
    <figcaption>I'll never be tall because I don't have the class ".img"</figcaption>
  </figure>
</section>

Answer 2

The concept referred to by the original poster is known as mutual exclusion. To achieve mutual exclusion, the technique called Event Delegation is utilized in the demonstration below.

Specifics are elaborated in the demonstration provided:

// Reference parent element
const gallery = document.querySelector('.gallery');
// Gather all .img elements into a NodeList
const images = document.querySelectorAll('.img');
// Set parent element as click listener
gallery.onclick = toggleHeight;

// Event handler receives Event Object
function toggleHeight(event) {
  /* .currentTarget
  This Event property determines which
  element is listening for the click event,
  such as .gallery in this case
  */
  const listener = event.currentTarget;
  /* .target
  This Event property determines which 
  element was actually clicked by the user
  within .gallery
  */
  const clicked = event.target;

  /* Event Delegation
  By utilizing Event properties and flow
  control statements like "if", we can specify
  how specific elements should behave when the
  event occurs while excluding others
  */
  /* Delegating...
  1. Verify that the clicked element is
     within .gallery...
  2. Confirm that the clicked element
     has the class: ".img"
  If the user clicks an element that does not meet
  both conditions, nothing will happen.
  */
  if (clicked !== listener) {
    if (clicked.classList.contains('img')) {
      /* Mutual Exclusion
     A behavior where only one object in a group
     can exhibit a certain effect at any given time
      */
      /*
      For each ".img", check if it was clicked
      and toggle the class ".tall" on/off accordingly
      */
      images.forEach(img => {
        if (img === clicked) {
          img.classList.toggle('tall');
        } else {
          img.classList.remove('tall');
        }
      });
    }
  }
  /* 
  Prevent the click event from reaching
  ancestor elements (i.e., stop Event
  Bubbling)
  */
  event.stopPropagation();
};

.gallery {
  width: 90vw;
  height: auto;
  margin: 8px auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.img,
.small {
  max-height: 80px;
  max-width: 20vw;
  margin: 4px auto;
  display: block;
}

.img {
  cursor: pointer;
}

.tall {
  min-height: 500px;
}

figure {
  width: max-content;
  margin: auto 30vw;
}

<section class='gallery'>
  <img class="img" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

  <img class="img" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

  <img class="img" src="https://assets.picspree.com/variants/Q6FeBijP3z1pVPPu9ZrDsebE/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

  <figure>
    <img class='small' src='https://assets.picspree.com/variants/4yZoj6m5FAQkh5vgJbrkrrMC/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d'>
    <figcaption>I'll never be tall because I don't have the class ".img"</figcaption>
  </figure>
</section>

Answer 3

Answer №2

Achieving this is totally doable. By utilizing Array.from, you can manipulate a DOM list just like an array. To toggle CSS classes, employ classList.toggle and define your dimensions within the CSS classes:

const allImages = document.querySelectorAll('.imgclasstosize');

allImages.forEach(el => {
  el.addEventListener('click', function(event) {
  
    const thisImg = event.target;
    const allOtherImages = Array.from(allImages).filter(img => {
       return img !== thisImg;
    });
  
    allOtherImages.forEach(img => {
        img.classList.remove('big')
    });
  
    thisImg.classList.toggle('big');
  
  });
});

img.imgclasstosize {
    height: 80px;
    border: 1px solid gray;
    transition: height 1s ease;
}

img.imgclasstosize.big {
    height: 250px;
}

<img class="imgclasstosize little" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d" />

<img class="imgclasstosize little" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d" />

Answer 4

Achieving this is totally doable. By utilizing Array.from, you can manipulate a DOM list just like an array. To toggle CSS classes, employ classList.toggle and define your dimensions within the CSS classes:

const allImages = document.querySelectorAll('.imgclasstosize');

allImages.forEach(el => {
  el.addEventListener('click', function(event) {
  
    const thisImg = event.target;
    const allOtherImages = Array.from(allImages).filter(img => {
       return img !== thisImg;
    });
  
    allOtherImages.forEach(img => {
        img.classList.remove('big')
    });
  
    thisImg.classList.toggle('big');
  
  });
});

img.imgclasstosize {
    height: 80px;
    border: 1px solid gray;
    transition: height 1s ease;
}

img.imgclasstosize.big {
    height: 250px;
}

<img class="imgclasstosize little" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d" />

<img class="imgclasstosize little" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d" />

Restore original state on various elements using JavaScript

Answer №1

Answer №2

Similar questions

Challenges encountered with Material-UI elements

In Google Chrome, the :after element on the left is cleared, while other browsers do not

Remove the color gradient for the column headers in the Google Visualization table

Attempting to grasp the intricacies of HTML5/JS video playback quality

Substitute the identifier with the name

If the given response `resp` can be parsed as JSON, then the function `$

Synchronize data bidirectionally between parent and child components in Vue 2

Troubleshooting Bootstrap bug caused by rollupPluginBabelHelpers

Securing client-side code with AngularJS for enhanced security

Trouble with jQuery not loading properly in HTML

Upgrading to React Router v6: Implementing Loader Functions with Context API

Having trouble sending serialized data using jQuery Ajax in IE6

How can I transfer a JavaScript variable to a Django template before submitting the form?

What is the best way to send an inline SVG string to my controller?

Utilizing commonjs pattern to share functions among different couchdb views for increased reusability

Generate a unique border using jQuery randomization techniques

Connecting pages through index.html within the hosting file manager directory

What is the best way to navigate to a specific div while scrolling on a webpage?

Leveraging Buttons within React Material UI Tables

How can we use Angular Table to automatically shift focus to the next row after we input a value in the last cell of the current row and press the Enter key