JavaScriptでbuttonのvalueを取得する方法
Sat Aug 10, 2024「JavaScriptでbuttonのvalueを取得する方法」とググると、だいたいこんな感じのコードがよくヒットします。
<button type="button" name="button1" value="ボタン１">
document.getElementById("button1").value
まぁ、簡単ですね。buttonオブジェクトのvalue値を取得するというやつ。
しかし、実際よくあるケースというのは、こんな単純なものではなく、サーバーから返ってきたJSONをDOMで操作して、そのボタンを押すとデータを削除したりなんかをするというのが、ありありのケースだと思います。
ということで、今回は、複数のボタンのvalueの値を取得する方法を書いていきます。
HTML部分
まずはフロントを作ります。
<!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を使います。
完成版のコードはこちら。
document.querySelectorAll('.button').forEach(function (button) {
button.addEventListener('click', {value: `${button.value}`, handleEvent: onClickButton});
})
function onClickButton() {
console.log(`${this.value}がクリックされました`)
}
まずは、document.querySelectorAllです。単純に、こんな感じで書くと動きません。
document.getElementById("button")
const button = document.querySelectorAll('.button')
button.addEventListener('click', onClickButton);
エラー内容を見てみると。
Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function
at Object.<anonymous>
document.querySelectorAllで取得できるのはNodeList オブジェクトです。
これがエラーの原因でした。
addEventListenerは、EventTargetオブジェクトのメソッドですが、querySelectorAllで取ってきたオブジェクトはNodeListオブジェクトです。
addEventListenerを使えるようにするには、ドキュメントにもあるようにforEach() メソッドを使います。
次に問題なのが、addEventListenerに引数を渡す方法。
まず、引数だからこんなでいいじゃねと思って書いたのが、こちら(正しく動きません)。
const button = document.querySelectorAll('.button').forEach(function (button) {
button.addEventListener('click', onClickButton(button.value));
})
function onClickButton(e) {
console.log(`${e}がクリックされました`)
}
結果。クリックしてないのに実行される。。。
1がクリックされました
2がクリックされました
エラーなので、例の如く公式のドキュメントを読む。
イベントリスナーには、コールバック関数を指定することもできますが、 EventListener を実装したオブジェクトを指定することもでき、その場合は handleEvent()メソッドがコールバック関数として機能します。
とういうことなので、こうすればOK
button.addEventListener('click', {value: `${button.value}`, handleEvent: onClickButton});
まだまだ、奥が深いJavaScript
