JavaScriptでbuttonのvalueを取得する方法

Sun Oct 4, 2020 - JavaScript
Tue Oct 6, 2020

「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

See Also