addEventListner to multiple images

Question

I wrote a little javascript that was supposed to change the size of all images on my web page when a user clicks on it. But I resive an error when I try to run it.

<script  type="text/javascript">

function changeSize(img){

var bigsize = "800"; 
var smallsize = "500"; 

  if(img.height == bigsize) img.height = smallsize;
  else img.height = bigsize;
  }
var element = document.getElementsByTagName("img");
element.addEventListener('click',changeSize(this),false  );
</script>

What am I doing wrong?

can You paste the error as well? – Krzysztof Witczak Jan 25 '16 at 14:19 — Krzysztof Witczak, Jan 25 '16 at 14:19
Also pass html code snippet – Andriy Ivaneyko Jan 25 '16 at 14:19 — Andriy Ivaneyko, Jan 25 '16 at 14:19

Andriy Ivaneyko · Answer 1 · 2016-01-25T14:36:41.753

0

Access your img in changeSize as event.target, also addEventListener called incorrectly, see code snippet below in details because a lot of code were updated:

Working code snippet, you could see that image border changed after clicking on image.

function changeSize(event){

var bigsize = "800"; 
var smallsize = "500"; 

  if(event.target.height == bigsize) event.target.height = smallsize;
  else event.target.height = bigsize;
  }

var elements = document.getElementsByTagName ("img");

for (var i = 0; i < elements.length ; i++) {
    elements[i].addEventListener("click", 
        changeSize, 
        false);
}

img{
border: 1px solid black;
}

<img onclick="changeSize(event)" width='30' height='40'/>

<img width='30' height='40'/>
<img width='30' height='40'/>
<img width='30' height='40'/>

edited Jan 25 '16 at 14:36

answered Jan 25 '16 at 14:20

Andriy Ivaneyko

20,639
6
60
82

1

You're adding an event listener *and* binding it in HTML with onclick.. – leroydev Jan 25 '16 at 14:21
1

"Your code works well" — No, it doesn't. – Quentin Jan 25 '16 at 14:21
2

"pass image into your changeSize properly as in code snippet below" — Intrinsic event attributes are awful. The approach the OP was trying to take is much better. – Quentin Jan 25 '16 at 14:21
@Quentin Thanks for your critical comments, my answer wasn't good, you are definitely right, i've completely updated it . – Andriy Ivaneyko Jan 25 '16 at 14:37
@leroy thanks for your comment. I've updated my answer completely. – Andriy Ivaneyko Jan 25 '16 at 14:39

addEventListner to multiple images

1 Answers1