Trying to have a clicked-on button display it's value attribute

Question

Here's my code

for(var i = 0; i<tabs.length; i++)
        {
                alert(tabs[i].getAttribute('value'));
                tabs[i].onclick = function() {
                        alert("clicked");
                        alert(tab[i].getAttribute('value'));
                };
        }

This is all in the window.onload function. The first alert works, i.e. the value of each input element is alerted when the page loads. Then, when I click one of the buttons, "clicked" is alerted, but not the value attribute.

Say I have three tabs with the values "home", "about", and "contact". Is there a way to have access to (in this case, simply alert) the value (or any other) attribute when they're clicked without manually writing each onclick method?

Thanks

You try with this.getAttribute('value') instead of tab[i].getAttribute('value')? — Gonzalo Bahamondez, Mar 19 '14 at 02:13
@GonzaloBahamondez that did the trick. So in an onclick function, 'this' is the element that was clicked? — user3391564, Mar 19 '14 at 02:20
This represent the element in the callback function, read about function scopes. — Gonzalo Bahamondez, Mar 19 '14 at 02:22
@user3391564: `this` refers to the element the handler was bound to. Read http://www.quirksmode.org/js/introevents.html to learn all there is to know about event handling. — Felix Kling, Mar 19 '14 at 03:10

score 2 · Answer 1 · answered Mar 19 '14 at 02:21

2

Did You try with:

this.getAttribute('value')

instead of

tab[i].getAttribute('value')?

answered Mar 19 '14 at 02:21

Gonzalo Bahamondez

1,371
1
16
37

score 2 · Answer 2 · answered Mar 19 '14 at 02:23

I think you meant

tabs[i].getAttribute('value')

instead of

tab[i].getAttribute('value')

Either ways, The problem here is that the value of i is long changed before the click events are fired.

The simplest solution is to wrap the code with (function (i) { & })(i);

This works as a new copy of i is created & passed to the click event.

Here is a DEMO with your code. And this DEMO after the changes.

Updated code:

for (var i = 0; i < tabs.length; i++) {
        alert(tabs[i].getAttribute('value'));
        (function (i) {
            tabs[i].onclick = function () {
                alert("clicked");
                alert(tabs[i].getAttribute('value'));
            }
        })(i);
    }

Trying to have a clicked-on button display it's value attribute

2 Answers2