Javascript - style elements in an array

Question

I have an array of images and I want to style those images with a border whenever they are clicked on. I can get one image to style using an index number, but can't seem to get the function to run on each image whenever it's clicked on. I get a "cannot set property of 'border' of undefined at HTMLImageElement.picStyle".

HTML:

<div id="pic-container">
    <img class ="dogImg" src="img/dog1.jpg">
    <img class ="dogImg" src="img/dog2.jpg">
    <img class ="dogImg" src="img/dog3.jpg">
    <img class ="dogImg" src="img/dog4.jpg">
    <img class ="dogImg" src="img/dog5.jpg">
</div>

JS:

var dogPics = document.getElementsByClassName('dogImg');

function picStyle() {
   dogPics.style.border = "1px solid black";
   }


for (var i = 0; i < dogPics.length; i++) {
   dogPics[i].addEventListener('click' , picStyle ) ; 
}

Possible duplicate of How to get the element clicked (for the whole document)? — Zenoo
– Zenoo, Commented Mar 20, 2018 at 15:34

yajiv · Accepted Answer · 2018-03-20 15:37:38Z

2

Instead of dogPics.style.border use this.style.border.

var dogPics = document.getElementsByClassName('dogImg');

function picStyle() {
   this.style.border = "1px solid black";
   }


for (var i = 0; i < dogPics.length; i++) {
   dogPics[i].addEventListener('click' , picStyle ) ; 
}

<div id="pic-container">
    <img class ="dogImg" src="img/dog1.jpg">
    <img class ="dogImg" src="img/dog2.jpg">
    <img class ="dogImg" src="img/dog3.jpg">
    <img class ="dogImg" src="img/dog4.jpg">
    <img class ="dogImg" src="img/dog5.jpg">
</div>

answered Mar 20, 2018 at 15:37

yajiv

2,9492 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

1024 Over a year ago

Thanks! Learned a lot from your answer.

yajiv Over a year ago

@1024 glad it helped.

Collectives™ on Stack Overflow

Javascript - style elements in an array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related