【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に保存してください!笑

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

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

この記事を書いた人 :

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