Change height onclick and return to normal with JS

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