title: Return state back to normal on different elements with JS
body: <p>In a previous question a made here, I tried to know if there was a way to change the height of my pictures when I click on them, and then when I click them again they return to the original height with vanilla JS. A fellow user (thank you Butalin) provided me with a workable function but with a caveat: - If I click on the same picture, the behaviour is as expected. One click changes height, the next click changes back to inital height. - If i click on one picture to change height, and don't click again on the same picture but instead, click on the other, it changes the height of the next one (as expected), but does not change the height of the first one to normal.
  Is it possible to do this?</p>
  <p>Here's my code:</p>
  <pre><code>var element = document.querySelectorAll('.imgclasstosize');
  
  element.forEach(el =&gt; {
    el.addEventListener('click', function(event) {
      if (event.target.style.height == '500px') {
        event.target.style.height = '80px';
      } else {
        event.target.style.height = '500px';
      }
    });
  });
  </code></pre>
  <p>and here is the HTML:</p>
  <pre><code>&lt;img class=&quot;imgclasstosize&quot; src=&quot;https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d&quot;&gt;
  
  &lt;img class=&quot;imgclasstosize&quot; src=&quot;https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d&quot;&gt;```
  </code></pre>