Add onclick event to an HMTL element (img) with JavaScript

Question

I have a js function wich create an img tag and append It to a div tag:

function createImg() {
    let image = document.createElement("img");
    image.src = "random.png";
    document.querySelector("div").appendChild(image);

I want to add to this img an onclick event, so that when I click on It another function will runs, How can I do? I alredy searched something on stack and found .addEventListener() & .onclick() but both seem to don't work..

Answer 1

You can add the event listener to the image like:

image.addEventListener('click', function(){
  // do something
})

 var x = 0; function createImg() { let image = document.createElement("img"); image.src = `random${x}.png`; image.addEventListener('click', function() { console.log(this.src) }) x++; document.querySelector("div").appendChild(image); }

 <div></div> <button onclick="createImg()"> button </button>

Answer 2

Add id attribute first

  image.id = "imgDemo";

Then after appending add the event listener like below:

document.getElementById("imgDemo").addEventListener('click', function() {
     //function call here
  }, false);