MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

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

      2016/08/29

onclick-ivent

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

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

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

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

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

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

function-1
最近、ドットインストールで「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に保存してください!笑

 - プログラミング学習

この記事が気に入ったらいいね!しよう

最新情報をお届けします