【javascript】クリックで要素を追加・削除・操作する。

ドットインストールで勉強しても、実際に使わないと忘れちゃうよね!javascriptのイベントとか全然わかんないよね!

…ということで、改めてインプットしながらアウトプットすることにしました。CodePenがあれば、動的なイベントを発火させるのも楽チンですからね〜

ボタンクリックで要素を操作する

今回CodePenに追加したのは、ボタンをクリックしたタイミングで要素を操作するイベントです。

  1. 追加
  2. 削除
  3. 書き換え

▲これをjavasctiptで操作します。javascriptの基本は別の記事でもご紹介しているので、よくわからない方はぜひチェックしてみてくださいっ!

では早速始めましょー!

ボックスの色を変える

色の指定を書き換えるボタンを作り、そのボタンをクリックすると「ボックスの色が変わるイベント」が発火します。

See the Pen ボックスの色を変えるイベント by Chef (@chef-aomori) on CodePen.

テキストの追加・削除・書き換え

ボタンをクリックすると、ボックスの中にテキスト入りのp要素を追加したり、削除したり、書き換えたりすることができるイベントが発火します。

See the Pen テキスト要素を操作 by Chef (@chef-aomori) on CodePen.

ボタンクリックのイベントをjavascript側で設定する

先ほどのp要素を操作するイベントと結果はまったく同じですが、「イベントが発火するタイミングをjavasctipt側で設定」したサンプルです。

See the Pen テキスト要素を操作2 by Chef (@chef-aomori) on CodePen.

HTML側で「onclick属性」を指定するより、このようにイベントリスナーを使った方が実用的だと思います。多分。

まとめ

今回のイベントは基本中の基本なんですが、意識してコード書いてないと忘れちゃいますね。1からコード書くのは無理でした。

そしてやっぱり、イベントの「過程」と「結果」が見えるのはいいですね。早くCodePen使っとけば良かった…(涙)

「あれ?ボタンクリック時のイベントの設定どうやるんだっけ?」と悩みそうな方は、ぜひPocketに保存してください!笑

注目 DMM.comの動画や映画が月額500円で見放題!無料お試しあり!

注目 【2週間無料】Huluの登録・解約方法〜おすすめ映画まで!

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!