javascript - 将 html 属性推送到数组 onClick

Question

我正在尝试使用一个简单的函数将元素的数字属性推送到数组 onclick，但数组仅包含用逗号分隔的空值。这是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

number 不是button 元素的有效属性。为了检索它，您必须使用与 API 不同的函数

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

更好的是，将您的number属性存储在data-标记中，如下所示：

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

使其符合标准。然后你会使用

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

检索它。

Answer 2

这是因为 number 不是标准属性，所以 this.number 什么都不是。您必须以另一种方式进行，例如为每个按钮提供一个 id 并保留一个包含哪些 id 具有哪些数字的数组

Answer 3

• 按钮 类型=“按钮”？
• 数字属性？

使用data-*属性！

现场演示

<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 );
}

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