How to know which HTML element is clicked using javascript and get its ID?

I have displayed 3 labels dynamically using PHP for pagination- Page 1 , 2, 3 ,

<label id="<?php echo 'labelofpagination'.$z; ?>" value="<?php echo $z; ?>" >
<a href=# onclick="paginationlabelclicked(); "><?php echo $z; ?>
</a>
        </label>

Now i want that if 1 is clicked then 1-10 records are displayed , if 2 , then 11-20 and so on.For this i would run a MySQL query accordingly.

But how do i get the ID ,

How to know which HTML element is clicked using javascript and get its ID?

I have displayed 3 labels dynamically using PHP for pagination- Page 1 , 2, 3 ,

<label id="<?php echo 'labelofpagination'.$z; ?>" value="<?php echo $z; ?>" >
<a href=# onclick="paginationlabelclicked(); "><?php echo $z; ?>
</a>
        </label>

Now i want that if 1 is clicked then 1-10 records are displayed , if 2 , then 11-20 and so on.For this i would run a MySQL query accordingly.

But how do i get the ID ,

• php
• javascript
• mysql
• html
• getelementbyid

• 3 Labels describe what form controls are for. You don't have a form control, so get rid of the label. – Quentin Commented Jul 25, 2011 at 6:48
• 2 Labels don't have a value attribute either. – Quentin Commented Jul 25, 2011 at 6:51

5 Answers 5

Build on things that work. Start with a working link.

<a href="myScript.php?page=$z" 
   onclick="return paginationlabelclicked(this);">
      <?php echo $z; ?>
</a>

Then your script can extract the value from the href attribute or the content.

function paginationlabelclicked(element) {
    var page = element.firstChild.data;
    // …
    return false;
}

It would be a good idea to ditch the onclick attribute too.

try pass this to handler

<a href=# onclick="paginationlabelclicked(this); "><?php echo $z; ?>
    </a>

and then you can access id by using

function paginationlabelclicked(el){
  alert(el.id);
  // your code
}

UPDATE

In order that to be working you have assign id to anchor

<a id="page<?php echo $z; ?>" href=# onclick="paginationlabelclicked(this); "><?php echo $z; ?>
    </a>

and then you can access id by using

function paginationlabelclicked(el){
  alert(el.id.replace('page', ''));
  // your code
}

You can easily send the id into the function called onclick, something like that:

<label id="<?php echo 'labelofpagination'.$z; ?>" value="<?php echo $z; ?>" >
<a href=# onclick="paginationlabelclicked(<?php echo $z; ?>); "><?php echo $z; ?>
</a>
</label>

I'm assuming, what you want to do is to get the text out of the <a> link that was clicked on so you can know what number the user clicked on and you can use that for your query. Here's a jQuery version:

HTML:

<label id="labelofpagination">
    <a href="#"> 1 </a>&nbsp; 
    <a href="#"> 2 </a>&nbsp; 
    <a href="#"> 3 </a>&nbsp;
    <a href="#"> 4 </a>&nbsp; 
    <a href="#"> 5 </a>&nbsp; 
</label>

Javascript:

$("#labelofpagination a").click(function() {
    // get text, trim string, convert to number
    var num = parseInt($(this).text().replace(/^\s+|\s+$/g, ""), 10);  
    // go to that page here
});

And a jsFiddle demo: http://jsfiddle/jfriend00/wesWd/

<a href=# onclick="paginationlabelclicked(this.parentNode); ">

...

function paginationlabelclicked(el){
  alert(el.id);
  // your code
}