Вставить атрибут html в массив onClick

Question

Я пытаюсь вставить числовой атрибут элемента в массив с помощью простой функции, но массив содержит только пустые значения, разделенные запятыми. Вот HTML-код.

<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>

с самого начала массив "корзина" пуст. Кажется, этот вопрос настолько глуп, но я не могу найти решение:(

Answer 1

Число не является допустимым атрибутом для элемента кнопки. Чтобы получить его, вы должны использовать функцию, отличную от API

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

Еще лучше, храните number атрибут внутри data- разметка вот так:

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

Так что это соответствует стандартам. Тогда вы бы использовали

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

чтобы получить это.

Answer 2

Это потому, что число не является стандартным атрибутом, поэтому this.number не является ничем. Вы должны сделать это по-другому, например, дать идентификатор каждой кнопке и сохранить массив, содержащий идентификаторы, какие номера имеют какие

Answer 3

• кнопка тип ="кнопка"?
• номер атрибута?

использование data-* атрибуты!

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 *}