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...

score 10 · Accepted Answer · answered May 25 '15 at 21:22

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
}

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. — Shayan, Jan 17 '20 at 16:59
The above answer by @user3227295 is good. Here's a hint if the parameter you're passing in through 'count' is actually a string: `imageTag.setAttribute("onclick", "disappear("+count+")");` Should be: `imageTag.setAttribute("onclick", "disappear('"+count+"')");` (i.e. wrap the "+count+" in an extra set of single quotation marks). — Scott-MEARN-Developer, Jan 12 '23 at 23:41

Dhiraj · Answer 2 · 2015-05-25T21:28:44.617

7

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.
}

edited May 25 '15 at 21:28

answered May 25 '15 at 21:23

Dhiraj

33,140
10
61
78

score 5 · Answer 3 · answered May 25 '15 at 21:28

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

Mohamed EL YONOUSI · Answer 4 · 2021-08-15T15:24:12.220

2

Change "" by '' in parameter function.

before::

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

after::

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

best practice::

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

edited Aug 15 '21 at 15:24

answered Aug 13 '21 at 22:35

Mohamed EL YONOUSI

121
1
4

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

4 Answers4