Change height onclick and return to normal with JS

Question

i'm new here.

I'm trying 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. I'm trying to do this by using a the same CSS class, a for-loop and an if/else.

My image html is this several times:

var element = document.getElementsByClassName("imgclasstosize");

for(var i = 0; i < element.length; i++) {
    var element = element[i];
    element.onclick = function() {

        if (element.style.height == "500px") {
            element.style.height = "200px";
        } else {
            element.style.height = "500px";
        }
    }
}

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

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

I can only do the behavior I want for the first image. All others don't do the same. Can you please help me know what I'm doing wrong?

Thanks in advance

score 0 · Answer 1 · answered Jun 02 '21 at 17:39

0

You're accessing the element the wrong way. Use the built in event, like this:

var element = document.getElementsByClassName("imgclasstosize");

for(var i = 0; i < element.length; i++) {
    var element = element[i];
    element.onclick = function(event) {

        if (event.target.style.height == "500px") {
            event.target.style.height = "200px";
        } else {
            event.target.style.height = "500px";
        }
    }
}

answered Jun 02 '21 at 17:39

Kinglish

23,358
3
22
43

Thank you so much for the answer. For some reason this did not work for me, as the behaviour remained the same. Only worked on the first picture, the rest of them did not change height. – jm3 Jun 03 '21 at 10:51

score 0 · Accepted Answer · answered Jun 02 '21 at 17:54

0

You could select all Elements using querySelector, you can also keep getElementsByClassName(). Then loop through each image and add event listener:

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

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

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

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

answered Jun 02 '21 at 17:54

butalin

327
3
9

Thank you very much for the answer. This worked for me, 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. Granted I did not specify this was need, but it this possible to do? – jm3 Jun 03 '21 at 10:52
Yes you can loop again thought all element in each button click to set all images height to normal again, if my answer is answering your post question, set it answered and ask again leave your new question link here so i can answer it there – butalin Jun 03 '21 at 11:46
Thank you Butalin. Here is the link: https://stackoverflow.com/questions/67822209/return-state-back-to-normal-on-different-elements-with-js – jm3 Jun 03 '21 at 13:16

Change height onclick and return to normal with JS

2 Answers2