Push html attribute to array onClick

Question

I'm trying to push number attribute of the element to the array onclick with a simple function, but array contains only empty values separated with commas. Here's html code.

<button type="button" class="btn btn-success btn-lg" number="12" onclick="basket.push(this.number)">toBakset</button>

<button type="button" class="btn btn-success btn-lg" number="15" onclick="basket.push(this.number)">toBakset</button>

<button type="button" class="btn btn-success btn-lg" number="18" onclick="basket.push(this.number)">toBakset</button>

from the start "basket" array is empty. Seems this question is so dumb but I can't find a solution :(

Be aware that using standard Javascript without libraries, IE8 (and 9, I think) can't access custom attributes. I use jQuery for custom attributes. This is in addition to changing the name of it to "data-numbers" and using one of the methods below to access the data. Or just onclick="basket.push(12)" — Mat Carlson
– Mat Carlson, Commented Oct 30, 2013 at 21:59

Travis J · Accepted Answer · 2013-10-30 21:50:25Z

5

number isn't a valid attribute for the button element. In order to retrieve it you would have to use a different function from the API

onclick="basket.push(this.getAttribute('number'))"

Better yet, store your number attribute inside of the data- markup like this:

<button data-number="5" ...

So that it conforms to standards. Then you would use

onclick="basket.push(this.getAttribute('data-number'))"

to retrieve it.

answered Oct 30, 2013 at 21:50

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AwokeKnowing · Accepted Answer · 2013-10-30 21:49:42Z

0

it's because number isn't a standard attribute, so this.number isn't anything. you have to do it another way, such as give an id to each button and keep an array containing which ids have which numbers

answered Oct 30, 2013 at 21:49

AwokeKnowing

8,2669 gold badges40 silver badges49 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2013-10-30 21:56:12Z

0

button type="button" ?
number attribute ?

Use data-* attributes!

LIVE DEMO

<button onclick="basketPush(this)" data-number="12" class="btn btn-success btn-lg">toBakset</button>

var basket = [];

function basketPush( that ){
  basket.push( that.dataset.number );
}

_{DOCS: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*}

answered Oct 30, 2013 at 21:56

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

Push html attribute to array onClick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related