13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

どれがクリックされたかを判別する

Posted at

以下のように複数のボタンがHTML上にあるとします。

<button name="item1" onclick="foo()">商品1</button>
<button name="item2" onclick="foo()">商品2</button>
<button name="item3" onclick="foo()">商品3</button>

ボタンが押されると、foo()が実行されます。
このとき、何番目のボタンが押されたかを取得したい場合に、data-xxxを使うと便利です。

<button data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-index="3" name="item3" onclick="foo()">商品3</button>

上記で商品1をクリックした場合

foo(e) {
   // datasetは、data-xxxで指定されたオブジェクトになる
   // {index:1}
   const data = e.currentTarget.dataset['index']; // 1が返される
}

data-xxxを増やすと

<button data-id="foo" data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-id="bar" data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-id="baz" data-index="3" name="item3" onclick="foo()">商品3</button>
foo(e) {
   // datasetは、data-xxxで指定されたすべてが入る
   // {id:"foo", index:1}
   const data = e.currentTarget.dataset['id']; // fooが返される
}

参考

MDN

13
11
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?