CODEWITHSUNDEEP
javascriptarraysstyles
1024
1024

Reputation: 11

Javascript - style elements in an array

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 ) ; 
}

Upvotes: 1

Views: 56

Answers (1)

yajiv
yajiv

Reputation: 2941

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>

Upvotes: 2

Related Questions