How to get the ID of the clicked button using JavaScript / jQuery?

The consistent arising advancements in the realm of web improvement consistently saves the energy for this subject through the rooftop. Be that as it may, before you tackle the large ventures, we recommend you start by learning the fundamentals. Launch your web advancement venture by learning JS ideas with our JavaScript Course. Presently at it’s least cost of all time!

Model 1: This model sets an onClick occasion to each fasten, when button is clicked, the ID of the button is passed to the capacity then it prints the ID on the screen.

<html>

<script>
function buttonclick(){
var pagebutton= document.getElementById("selfclick");
pagebutton.click();
}
</script>

<a href="#" onmouseover="buttonclick()">Hover to click button above </a>

<button id="selfclick" onclick="alert('Roar');">No Manual Click </button>

</html>

I have the following html:

<a href="#" id="#1" class="pagerlink" >link</a>
<a href="#" id="#3" class="pagerlink" >link</a>
<a href="#" id="#2" class="pagerlink" >link</a>
/*etc.... */

and the following jQuery script:

$(document).ready(function() {

    var $container = $('.gallery_r').cycle({ 
        fx:     'scrollHorz', 
        speed:   500, 
        timeout: 0 
    }); 

    $('a.pagerlink').click(function() { 
        var id = $(this).attr('id');
        $container.cycle(id); 
        return false; 
    }); 

});

the ‘pagerlink’ links control are to jQuery Cycle slideshow. If I swap this line:

$container.cycle(id);

for this

$container.cycle(7);

it works… (obviously only navigating to slide number 7). So, my question is how can I pick up the ID of the link being clicked and pass it into that line?

Table of Contents

Use the jQuery `attr()` Method

You can simply use the jQuery attr() method to get or set the ID attribute value of an element.

The following example will display the ID of the DIV element in an alert box on button click.

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get ID of an Element</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    div{
        padding: 20px;
        background: #abb1b8;
    }
</style>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var elmId = $("#test").attr("id");
        alert(elmId);
    });
});
</script>
</head>
<body>
    <div id="test">#text</div>
    <br>
    <button type="button" id="myBtn">Show Div ID</button>
</body>
</html>

You can also get the ID of multiple elements having same class through loop, like this:

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get ID of Multiple Elements</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    div{
        padding: 20px;
        margin-bottom: 10px;
        background: #abb1b8;
    }
</style>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var idArr = [];
        $(".box").each(function(){
            idArr.push($(this).attr("id"));
        });
        
        // Join array elements and display in alert
        alert(idArr.join(", "));
    });
});
</script>
</head>
<body>
    <div class="box" id="boxOne">#boxOne</div>
    <div class="box" id="boxTwo">#boxTwo</div>
    <div class="box" id="boxThree">#boxThree</div>
    <button type="button" id="myBtn">Show ID List</button>
</body>
</html>

You can also get the ID of individual element when using class selector based on index starting from 0, for example, to get the ID of first element in a set of matched elements you can use $(".box").get(0).id or $(".box")[0].id.

Similarly, to get the ID of last element you can use something like this, $(".box").get($(".box").length - 1).id or $(".box")[$(".box").length - 1].id, because jQuery selector returns a collection of matched elements not a single element.

Also Read: How to Install Anaconda on Windows?

Use the jQuery attr() Method

Example

Example

Leave a Reply Cancel reply

Use the jQuery `attr()` Method