イベントのtargetプロパティを使う - JavaScriptのチュートリアル

このレッスンでは イベントのtargetというプロパティの 使い方についてご説明をします。 今開いているHTMLドキュメントの JavaScriptコードなんですが、 button がありまして id に button とありますけれども、 この button のテキストを この data- のグローバル属性の 「新しいテキスト」という文字に クリックすると置き換えるというふうに なっています。 まず button を getElementById で 要素を取ってきて、それに対して addEventListener で clickイベントが起こったら この関数を呼び出すようにということに なっています。 そうすると button の tectContent に対して dataset ですね。 data- から取ってきた この「新しいテキスト」という文字列を 設定するということになっています。 動作を確認しておきましょう。 ブラウザでドキュメントを開きました。 そして「テキスト変更」という文字が ボタンに表示されていますけれども クリックすると、これが 「新しいテキスト」に変わります。 さてここで button を増やします。 これをコピーして、ペーストということで button は改行しておきましょう。 そして id はもちろんドキュメントの中で 一意、ユニークでなければいけませんので ここはそれでは buttonの2 にしましょう。 そして、やはりクリックしたら 何か起こしたいので、要素を取ってきます。 これもまたコピーして、ペーストで 変数名もこれ、かぶってはいけませんから 2 にして、こちらは id の 2 ですね。 イベントリスナーも 設定しなければいけませんから コピーして、そしてペーストと。 こちらも button2 ですね。 さて、ここをどうするかですね。 呼び出す関数。 これもbutton2用に新たな関数として changeTitle2 を作ってもよいのですけど、 こういった形で button を どんどん作っていって 同じような構造、data- の属性で、 ここはそれでは別のにしましょうか。 「別の」と。 こんな感じで同じ構造で この data- だけ違うといったものが いっぱいあった場合、 できればひとつの関数で済ませたいですね。…