how to get unknown element ID in java script

Question

In my html page I have a many links that their ID can change all the time it looks something like that (I have around 140 links):

 <a id=33 onclick="javascriptfunction()"
           href="33">link1</a>
 <a id=37 onclick="javascriptfunction()"
           href="37">link2</a>
 <a id=113 onclick="javascriptfunction()"
           href="113">link3</a>
 <a id=3 onclick="javascriptfunction()"
           href="3">link4</a>
          .....
          .....
          .....

Client can randomly select one of them and I want to perform operation in javascriptfunction() that is of course in JavaScript based on their element ID.

Is there a way to get in JavaScript(no jQuery) the link element ID which was clicked?

First of all, you need these around your ID ". Next: an ID cannot start with a number! — Bram Vanroy
– Bram Vanroy, Commented Jul 3, 2013 at 13:06
onclick="alert this.id" @Bram 1) wrong - it's html not xml 2) wrong too, html5 assumed. — Christoph
– Christoph, Commented Jul 3, 2013 at 13:16
@Everyone: I was indeed wrong in the first part. It seems good practice to add 'em though. Also, the post was not tagged HTML5 so I assumed an older format. — Bram Vanroy
– Bram Vanroy, Commented Jul 3, 2013 at 13:47

mohkhan · Accepted Answer · 2013-07-03 13:06:57Z

5

Something like this...

<a id=2 onclick="javascriptfunction(this)"
           href="#">link4</a>

// In javascript
function javascriptfunction(element){
    var id = element.id;
}

answered Jul 3, 2013 at 13:06

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

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

Comments

Dhaval Marthak · Accepted Answer · 2013-07-03 13:05:20Z

3

You can try:

<a id=3 onclick="return javascriptfunction(this)" href="3">link4</a>

function javascriptfunction(ID){
   alert(ID.id);
   return false;
}

answered Jul 3, 2013 at 13:05

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

4 Comments

mishik Over a year ago

Maybe even javascriptfunction(this.id) ?

EnterSB Over a year ago

It won't work as you typed, you sent this, and this is anchor.

tymeJV Over a year ago

But...you're alerting the object of this, you mean ID.id

EnterSB Over a year ago

@DadoJerry not a problem, as long as it helps someone.

Nidhin Joseph · Accepted Answer · 2013-07-03 13:08:57Z

2

<script>
function javascriptfunction(id)
{
    alert("You clicked a tag with the id "+ id);
}
</script>
<a id=33 onclick="javascriptfunction(this.id)"/>

You could use this.

answered Jul 3, 2013 at 13:08

Nidhin Joseph

1,4813 gold badges15 silver badges33 bronze badges

Comments

user447356 · Accepted Answer · 2013-07-03 13:20:28Z

If you don't want to change all 140+ links in the HTML markup, you can also inject the following JavaScript code in the <head> section:

window.onload = function() {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        var id = anchor.id;
        if (id && id.length > 0) {
            anchor.onclick = function() {
                RealClickHandler(this.id);
                return false;
            };
        }
    }
};

This will override the existing onclick of all the links, and call different function passing it the id. Sample function might look like this:

function RealClickHandler(id) {
    alert("anchor with id " + id + " was clicked");
}

Live test case.

Damian0o · Accepted Answer · 2013-07-03 13:16:55Z

-1

Maybe use jQuery! Here is example.

$("div").on('click', 'button' , function(obj){
    alert(obj.target.id);
});

answered Jul 3, 2013 at 13:16

Damian0o

6635 silver badges15 bronze badges

2 Comments

orique Over a year ago

The OP explicitly asks for a non-jQuery solution.

apsillers Over a year ago

When is “use jQuery” not a valid answer to a JavaScript question? All the following apply here: 1) It is the entire answer, with no explanation of exactly how jQuery helps, 2) When the problem can be solved simply without jQuery, 3) When the question specifically asks for no javascript frameworks

Collectives™ on Stack Overflow

how to get unknown element ID in java script

5 Answers 5

Comments

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest