CODEWITHSUNDEEP
javascripthtmlcssevents
Matthias Herrmann
Matthias Herrmann

Reputation: 2790

Setting EventListener On Div Containing Image Not Triggering Function

I have placed an image inside a div element and I'm setting a clicklistener on it, but the method onGermanFlagClicked does not execute.

<div style="position: absolute; top: 10px; padding-left: 10px;" id="de">
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/1280px-Flag_of_Germany.svg.png" heigth="50px" width="50px"/>
</div>

<script>
  var germanFlag = document.getElementById("de");
  germanFlag.addEventListener("onclick", onGermanFlagClicked);
  
  /* Changing language here */
  function onGermanFlagClicked(event){
    event.preventDefault();
    console.log("clicked");
  }
</script>

How can I fix this?

Upvotes: 0

Views: 95

Answers (2)

Ashish
Ashish

Reputation: 4330

change germanFlag.addEventListener("onclick", onGermanFlagClicked); line to

germanFlag.addEventListener("click", onGermanFlagClicked);

Note that you don't use the "on" prefix for the event; use "click" instead of "onclick".

here is the list of all valid DOM events.

Check here for more on JavaScript HTML DOM EventListener.

Upvotes: 0

Asjon
Asjon

Reputation: 166

It's: germanFlag.addEventListener("click", onGermanFlagClicked); not germanFlag.addEventListener("onclick", onGermanFlagClicked);. Check this out.

Upvotes: 2

Related Questions