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?
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?
Share Improve this question asked Jul 3, 2013 at 13:04 CanttouchitCanttouchit 3,1596 gold badges39 silver badges52 bronze badges 5-
3
First of all, you need these around your ID
". Next: an ID cannot start with a number! – Bram Vanroy Commented Jul 3, 2013 at 13:06 - 1 @BramVanroy -- HTML5, ID's can start with anything now :) – tymeJV Commented Jul 3, 2013 at 13:09
- Yeah forgot to add those :) – Canttouchit Commented Jul 3, 2013 at 13:14
-
onclick="alert this.id"@Bram 1) wrong - it's html not xml 2) wrong too, html5 assumed. – 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 Commented Jul 3, 2013 at 13:47
5 Answers
Reset to default 5Something like this...
<a id=2 onclick="javascriptfunction(this)"
href="#">link4</a>
// In javascript
function javascriptfunction(element){
var id = element.id;
}
You can try:
<a id=3 onclick="return javascriptfunction(this)" href="3">link4</a>
function javascriptfunction(ID){
alert(ID.id);
return false;
}
<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.
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.
Maybe use jQuery! Here is example.
$("div").on('click', 'button' , function(obj){
alert(obj.target.id);
});