Question

82

Get clicked button's id by class name without jquery

rated 0 times [ 85] [ 3] / answers: 1 / hits: 17314 / 11 Years ago, mon, september 30, 2013, 12:00:00

I don't want to use jquery for this small task.

HTML

<form action= method=post >

    <input type=button id=btn_1 class=cls_btn value=Click Me />

    <input type=button id=btn_2 class=cls_btn value=Click Me />

    <input type=button id=btn_3 class=cls_btn value=Click Me />

</form>

javascript

I want id of button when it clicked.

my js code looks like

<script >

    document.getElementsByClassName('cls_btn').onclick = function(){

        alert(this.id);

    };

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darrell

Add To Favorites

Follow

Total Points: 109

Total Questions: 113

Total Answers: 113

Location: Zambia

Member since Sat, Oct 31, 2020

4 Years ago

answered 11 Years ago bradleymoisesy · Accepted Answer

getElementsByClassName returns a list of DOM elements so you need to loop it and add an event listener to each:

var buttons = document.getElementsByClassName('cls_btn');

for (var i = 0; i < buttons.length; i++) {

    buttons[i].addEventListener('click', function() {

        alert(this.id);

    });

}

Working demo