How to add parameters onto function in setAttribute() method in javascript

Question

In javascript, I was creating new image tags and I was adding attributes to them with the setAttribute() method but I found that if I add an onclick event and add a function, I can't set in a parameter for it as seen below

count = 0; //Will be the number that will go into parameter for function
function start() {
imageTag = document.createElement("IMG"); //Creates image tag
imageTag.setAttribute("src", "popo.jpg"); //sets the image tags source
count++; //as the start function keeps getting called, count will increase by 1 and the parameter for each function in each individual image tag will increase by one
imageTag.setAttribute("onclick", "disappear(count)"); //this will add the onclick attribute with the function disappear() and the parameter inside which will be a number that will increase as the start function is called again and the image tag is called again *ERROR*
document.body.appendChild(imageTag); //appends the image tag created
}

The problem is, when each new image tag is created, it literally just creates

<img src = "popo.jpg" onclick = "disappear(count)"/>

I wanted it to be more like

<img src = "popo.jpg" onclick = "disappear('1')"/>
<img src = "popo.jpg" onclick = "disappear('2')"/> //and so on...

Solution 1

add count in function as param, not as string.

count = 0; //Will be the number that will go into parameter for function
function start() {
    imageTag = document.createElement("IMG"); //Creates image tag
    imageTag.setAttribute("src", "popo.jpg"); //sets the image tags source
    count++; //as the start function keeps getting called, count will increase by 1 and the parameter for each function in each individual image tag will increase by one
    imageTag.setAttribute("onclick", "disappear("+count+")"); //this will add the onclick attribute with the function disappear() and the parameter inside which will be a number that will increase as the start function is called again and the image tag is called again *ERROR*
    document.body.appendChild(imageTag); //appends the image tag created
}

Solution 2

Instead of adding click event as an attribute add it using addEventListener

imageTag.addEventListener("click", disappear.bind(null, count));

Bind will make count available to the function when invoked.

Then create a disappear function

function disappear(ID){
  alert(ID); // This should give the count.
}

Solution 3

Since you use setAttribute, you are setting an event handler content attribute. The corresponding event handler is set to an internal raw uncompiled handler. The scope of that code will be

• The global object
• The document
• The form owner (if any)
• The element (if any)

If your count variable isn't available in any of these scopes, it won't work. And even if it's available, since you keep increasing it, the used value will be the modified one.

Bu you don't want that. Instead, you can:

• Write the variable in the uncompiled handler:

  imageTag.setAttribute("onclick", "disappear(" + count + ")");
  

• Use event handler IDL attributes, e.g.

  var localCount = count; // Using a local copy in case `count` is modified
  imageTag.onclick = function() {
      disappear(localCount);
  };
  

Solution 4

Change "" by '' in parameter function.

before::

imageTag.setAttribute("onclick", "disappear(" + count + ")");

after::

imageTag.setAttribute("onclick", "disappear('" + count + "')");

best practice::

imageTag.setAttribute("onclick", `disappear('${count}')`);

View more solutions

Comments

[Shayan]

Is there a way to not use setAttribute and just use imageTag.onClick = disappear(count)? I tried a lot of different combinations using " " and ' ' and ` ` and eval and JSON.stringify to no avail.