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

user3227295 · Accepted Answer · 2015-05-25 21:22:57Z

10

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
}

answered May 25, 2015 at 21:22

user3227295

2,1561 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shayan Over a year ago

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.

Scott-MEARN-Developer Over a year ago

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

Dhiraj · Accepted Answer · 2015-05-25 21:28:44Z

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, 2015 at 21:28

answered May 25, 2015 at 21:23

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Comments

Oriol · Accepted Answer · 2015-05-25 21:28:23Z

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 · Accepted Answer · 2021-08-15 15:24:12Z

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, 2021 at 15:24

answered Aug 13, 2021 at 22:35

Mohamed EL YONOUSI

1271 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related