Passing id of html image to javascript on click

Question

Is there any way to pass the id/name of an html image when you click on it? It seems the onclick function is defunct now, and I can't seem to find anything with a similar functionality.

Each image has a unique id, which is set at creation, by the name variable. This is how I am creating the clickable images

function addbutton(position, name) {
    var element = document.createElement("input");
    var imgURL = chrome.extension.getURL("icons/donate.png");
    element.setAttribute("type", "image");
    element.setAttribute("src", imgURL);
    element.setAttribute("class", "addressbuttons");
    element.setAttribute("id", name); //the name variable is set to a specific text
    element.setAttribute("onclick", "SubmissionInfo()"); //what can I replace onclick with?
    position.parentNode.insertBefore(element, position.nextSibling);
}

I want this function to run with the context of which image was clicked by using the contents of the name variable, as well as the x,y coords of the images

function SubmissionInfo() {
 ...
}

I know SubmissionInfo() should be globally accessible in its own .js file, but I don't know how to get it to detect the image being clicked and how to get the id of the image.

Also, I've only been working with both html and javascript for a few hours now, so I apologize for any major mistakes I might have made.

Zero Fiber · Accepted Answer · 2014-01-25 07:18:29Z

0

You can pass the id of the element that triggers the onclick using this.id

element.setAttribute("onclick", "SubmissionInfo(this.id)");

Change the SubmissionInfo() function accordingly

function SubmissionInfo(id) {
    ...
}

answered Jan 25, 2014 at 7:18

Zero Fiber

4,4752 gold badges25 silver badges34 bronze badges

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

2 Comments

AOTA Over a year ago

is this possible in a chrome extension? Because that is what I am using this for, and I think I read somewhere that onclick is no longer allowed. Apologies, probably should have mentioned that.

Zero Fiber Over a year ago

onclick works on all browsers. stackoverflow.com/questions/3526478/…

Suman Bogati · Accepted Answer · 2014-01-25 07:24:55Z

0

Inside the below function you can get id of clicked image by

function SubmissionInfo(){
    alert(this.id);  //this would refered the current clicked image.

},

And for your comment, You can use the element.addEventListener('click', SubmissionInfo) instead of element.setAttribute("onclick", "SubmissionInfo()");

answered Jan 25, 2014 at 7:24

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Comments

Sanky · Accepted Answer · 2014-01-25 07:36:43Z

0

You can try using this -

element.addEventListener('click', 'SubmissionInfo(event)');

function SubmissionInfo(event){
    do_my_stuff_with_id(event.currentTarget.id);
}

And you are right onclick does not work on chrome ext.

edited Jan 25, 2014 at 7:36

answered Jan 25, 2014 at 7:31

Sanky

19315 bronze badges

1 Comment

AOTA Over a year ago

I tried this, but it seems the 'SubmissionInfo(event)' is not working. it only does anything when the two '' are removed. However, when they are, chrome keeps complaining about SubmissionInfo not being defined.

Collectives™ on Stack Overflow

Passing id of html image to javascript on click

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related