Getting very weird Javascript error when trying to change image size

Question

So this is the error in the console:

Uncaught TypeError: Cannot read property 'style' of undefined.

var image = document.getElementsByClassName("zoomImg");
var trigger = document.getElementsByClassName('woocommerce-product-gallery__trigger'); 

    function enlarge() {
        image.style.width = "1000px"; //The error happens here
        image.style.height = "900px";
    }

    window.onload = function() { trigger.addEventListener("mouseover", enlarge());
    }

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Teemu, Sep 19 '17 at 10:47
What's weird about it? You get many element**s**, so you need to loop over them — Thomas Weller, Sep 19 '17 at 10:47
I apologise but I didn't find much on this. Thanks though Thomas. — vuffer, Sep 19 '17 at 10:52

score 1 · Accepted Answer · answered Sep 19 '17 at 10:55

On your first line, you get multiple elements, so in this case an array of elements. In your enlarge function, you assume that the variable "image" is 1 element, even though it actually is an array of elements (even though there might be only 1)

If there is only 1, and you are sure about that, then you could do the following:

image[0].style.width = "1000px";

However, if you assume there only is 1 result, you better give the element an id instead of a class, and use:

document.getElementById('zoomImg'); instead of document.getElementsByClassName('zoomImg');

Then there will be only one element, and not an array of elements.

Getting very weird Javascript error when trying to change image size

1 Answers1