【JavaScript】動的に生成した複数のボタンのうち、クリックされた要素を特定する方法
JavaScriptで複数の要素を動的に生成している際、「どの要素がクリックされたのか」を判定したいケースはよくあります。これを実現するには、addEventListener()を使用します。
ポイントは、イベントリスナーのコールバック関数が受け取るイベントオブジェクトです。evnt.targetで実際にクリックされた要素そのものを取得でき、さらにdatasetプロパティを組み合わせれば、あらかじめ各要素に設定しておいたdata-*カスタム属性の値も簡単に読み取れます。
実装例
以下がサンプルコードです。ループで3つのボタン（Javascript・MySQL・Java）を生成し、それぞれにdata-subject属性を設定しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
</body>
<script>
var addButton;
for (let i = 0; i < 3; i++) {
addButton = document.createElement('button')
if (i == 0) {
addButton.innerHTML = "Javascript"
addButton.dataset.subject = "Javascript"
document.body.appendChild(addButton)
}
if (i == 1) {
addButton.innerHTML = "MySQL"
addButton.dataset.subject = "MySQL"
document.body.appendChild(addButton)
}
if (i == 2) {
addButton.innerHTML = "Java"
addButton.dataset.subject = "Java"
document.body.appendChild(addButton)
}
addButton.addEventListener('click', function (evnt) {
console.clear();
console.log('Subject ' + evnt.target.dataset.subject + ' pressed')
})
}
</script>
</html>プログラムの実行方法
上記のプログラムを実行するには、ファイル名を「anyName.html」（例：index.html）として保存します。その後、VS Codeエディタ内でファイルを右クリックし、「Open with Live Server」を選択してください。ブラウザ上に3つのボタンが表示されます。
出力結果
このコードを実行すると、次のような画面出力が得られます。
続いて、いずれかのボタンをクリックしてみてください。開発者ツールのコンソールに「Subject ○○ pressed」という形式で、クリックされたボタンに対応する科目名が出力されます。
-
JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方
JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数
-
JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】
JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-