CODEWITHSUNDEEP
javascriptjquery
user2920788
user2920788

Reputation: 374

Getting ID of the button that used the function

I am trying to get the id from a button that uses the on click function without having to pass an object to the function. I keep getting undefined instead of the id and I have no idea why, everything I have read says this should work.

<input type="button" value="1" id="one" onclick="return A();"/>
<input type="button" value="2" id="two" onclick="return A();"/>
<input type="button" value="3" id="three" onclick="return A();"/>

<script type='text/javascript'>

function A(){
    var but = $(this).attr("id"); 
    alert(but); 
}    
</script>

http://jsfiddle.net/SM22W/

Upvotes: 0

Views: 153

Answers (11)

user2883188
user2883188

Reputation: 1

<input type="button" value="1" id="one" onclick="return A(this);"/>
<input type="button" value="2" id="two" onclick="return A(this);"/>
<input type="button" value="3" id="three" onclick="return A(this);"/>

<script type='text/javascript'>
function A(e){
    var but = e.id; 
    alert(but); 
}
</script>

Upvotes: 0

cj5
cj5

Reputation: 795

I see that you are using jQuery. Why not try using jQuery's event handling. I do this often, and the way your code is, is a very old style of javascript code.

You could provide a class to all the input elements:

<input type="button" value="1" id="one" class="dothebtnthing" />
...

In the javascript:

$(document).on('click', '.dothebtnthing', function(event) {
     var but = $(event.currentTarget).attr('id');
     // or this
     //var but = $(event.currentTarget).prop('id');
     alert(but);
});

That should work.

jQuery also supports custom 'data' attributes, and those allow for easier extension of data to a document object, i.e.

<input type="button" value="1" data-id="one" class="dothebtnthing" />
...

This allows you to reserve the id attribute for proper 'id', and you could append as much data to the element that you require.

$(document).on('click', '.dothebtnthing', function(event) {
     var but = $(event.currentTarget).data('id');
     alert(but);
});

Produces the same result.

Upvotes: 0

user3284426
user3284426

Reputation: 1

Another alternative

function A(obj){
alert(obj.getAttribute("id");
}

This is a simple way of getting the id of any object bind with a javascript event. You were missing the argument which has to be passed like this

<input type="text" onclick="A(this)" />

this pointer points the object itself and passes as an argument while getAttribute helps you get the id

Upvotes: 0

Kiran
Kiran

Reputation: 1798

In your example, this points to the window object, not the button. Therefore, either pass the button object to the function call (as suggested in the other answers), or, use jQuery to bind the click event to the button. If you do the latter, then I think this will point to the button as you expect it to.

E.g.: $("#one").click(...); $("#two").click(...); $("#three").click(...);

Upvotes: 0

Raibaz
Raibaz

Reputation: 9700

The solutions that use this as a parameter for A() are ok, but in my opinion it's better not to use the onclick attribute and to decouple the click handler logic from the HTML:

<input type="button" value="1" id="one"/>
<input type="button" value="2" id="two"/>
<input type="button" value="3" id="three"/>

<script type="text/javascript">
    $(document).ready(function() {
        $('input[type="button"]').click(function(event) {
            alert(event.target.id);
        });
    });
</script>

Also note that you can also use a css class for all your buttons and use it with jquery to query for the buttons you want to attach the click handler to.

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179116

The jQuery Way™ of binding events is via .on():

<input type="button" value="1" id="one" />
<input type="button" value="2" id="two" />
<input type="button" value="3" id="three" />

<script type='text/javascript'>
    function A(){
        var but = $(this).attr("id"); 
        alert(but); 
    }

    //when the A function is called, jQuery will make sure that `this` points to the
    //element that fired the click event
    $('input[type="button"]').on('click', A);
</script>

If you absolutely must have inline event bindings (because it is out of your control, or because of business requirements, there are very few reasonable excuses) you can call A to execute with a specific context:

<input type="button" value="1" id="one" onclick="return A.call(this);"/>
<input type="button" value="2" id="two" onclick="return A.call(this);"/>
<input type="button" value="3" id="three" onclick="return A.call(this);"/>

<script type='text/javascript'>
    function A(){
        var but = this.id;
        alert(but); 
    }
</script>

But if you're going to go through all that effort, why do you need jQuery at all? Additionally, these inline event bindings are annoying to maintain, because there's obvious code duplication.

Upvotes: 1

yunzen
yunzen

Reputation: 33439

<input class="A-Button" type="button" value="1" id="one" />
<input class="A-Button" type="button" value="2" id="two" />
<input class="A-Button" type="button" value="3" id="three" />

<script>
(function($) {
    $(function() {
        var A = function (){
            var but = $(this).attr("id"); 
            alert(but);  
        }

        $('.A-Button').click(A);
    });
}(jQuery))
</script>

http://jsfiddle.net/xES5d/

Upvotes: 0

Krzysiek
Krzysiek

Reputation: 2495

You should use jQuery instead onclick attribute:

<input type="button" value="1" id="one" class="clickable"/>
<input type="button" value="2" id="two" class="clickable"/>
<input type="button" value="3" id="three" class="clickable"/>

<script type='text/javascript'>
$('.clickable').on('click', function(){
    var $this = $(this); 
    alert(but.prop("id")); 
});
</script>

Upvotes: 0

j08691
j08691

Reputation: 207899

The way you're doing it (which I don't recommend since you're using jQuery) would be to pass the element to the function like:

<input type="button" value="1" id="one" onclick="return A(this);"/>
function A(that){
    var but = that.id; 
    alert(but); 
}

jsFiddle example

Since you're using jQuery, bind the click event and remove the inline JavaScript by using:

$('input[type="button"]').click(function(){
    alert(this.id); 
})

jsFiddle example

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

<input type="button" value="3" id="three" onclick="return A(this);"/>

function A(ele){
    var but = $(ele).attr("id"); 
    alert(but); 
}

However, as you're using jQuery already... you may as well do it this way:

<input type="button" value="3" id="three" class="buttonClick"/>

$('.buttonClick').on("click", function() {
     var but = $(this).attr("id"); 
     alert(but); 
});

Upvotes: 2

Anton
Anton

Reputation: 32581

You need to pass the obj like this

<input type="button" value="3" id="three" onclick="return A(this);"/>

function A(obj){
    var but = obj.id; 
    alert(but); 
}

DEMO

Upvotes: 1

Related Questions