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)?](https://stackoverflow.com/questions/9012537/how-to-get-the-element-clicked-for-the-whole-document) — Zenoo, Mar 20 '18 at 15:34

score 2 · Answer 1 · answered Mar 20 '18 at 15:37

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 '18 at 15:37

yajiv

2,901
2
15
25

Thanks! Learned a lot from your answer. – 1024 Mar 20 '18 at 15:43
@1024 glad it helped. – yajiv Mar 20 '18 at 15:58

Javascript - style elements in an array

1 Answers1