「JavaScriptでbuttonのvalueを取得する方法」とググると、だいたいこんな感じのコードがよくヒットします。
1
2
| <button type="button" name="button1" value="ボタン1">
document.getElementById("button1").value
|
まぁ、簡単ですね。buttonオブジェクトのvalue値を取得するというやつ。
しかし、実際よくあるケースというのは、こんな単純なものではなく、サーバーから返ってきたJSONをDOMで操作して、そのボタンを押すとデータを削除したりなんかをするというのが、ありありのケースだと思います。
ということで、今回は、複数のボタンのvalueの値を取得する方法を書いていきます。
HTML部分
まずはフロントを作ります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<title>ボタンクリック | example-code</title>
</head>
<body>
<button class="button" value="1">1</button>
<button class="button" value="2">2</button>
</body>
<script src="../JavaScript/buttonClick.js"></script>
</html>
|
JavaScriptの実装
要件としては、button1とbutton2のvalue
を取得したいので、id
で取得することはできないので、querySelectorAll
を使います。
完成版のコードはこちら。
1
2
3
4
5
6
7
| document.querySelectorAll('.button').forEach(function (button) {
button.addEventListener('click', {value: `${button.value}`, handleEvent: onClickButton});
})
function onClickButton() {
console.log(`${this.value}がクリックされました`)
}
|
まずは、document.querySelectorAll
です。単純に、こんな感じで書くと動きません。
1
2
3
| document.getElementById("button")
const button = document.querySelectorAll('.button')
button.addEventListener('click', onClickButton);
|
エラー内容を見てみると。
1
2
| Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function
at Object.<anonymous>
|
document.querySelectorAllで取得できるのはNodeList オブジェクトです。
これがエラーの原因でした。
addEventListener
は、EventTarget
オブジェクトのメソッドですが、querySelectorAll
で取ってきたオブジェクトはNodeList
オブジェクトです。
addEventListener
を使えるようにするには、ドキュメントにもあるようにforEach() メソッド
を使います。
次に問題なのが、addEventListener
に引数を渡す方法。
まず、引数だからこんなでいいじゃねと思って書いたのが、こちら(正しく動きません)。
1
2
3
4
5
6
7
| const button = document.querySelectorAll('.button').forEach(function (button) {
button.addEventListener('click', onClickButton(button.value));
})
function onClickButton(e) {
console.log(`${e}がクリックされました`)
}
|
結果。クリックしてないのに実行される。。。
1
2
| 1がクリックされました
2がクリックされました
|
エラーなので、例の如く公式のドキュメントを読む。
イベントリスナーには、コールバック関数を指定することもできますが、 EventListener を実装したオブジェクトを指定することもでき、その場合は handleEvent()メソッドがコールバック関数として機能します。
とういうことなので、こうすればOK
1
| button.addEventListener('click', {value: `${button.value}`, handleEvent: onClickButton});
|
まだまだ、奥が深いJavaScript
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
See Also