javascriptの実装

divをクリックしたら背景色が変わるように実装していきます。

• 要素の取得
• clickイベントの設定

要素の取得

・まずdivの要素の処理をするためにjavascriptではid属性がよく使われるので先日作ったdivにid属性を付けていきます。’target’としておきます。

・早速scriptタグの中にjavascriptを書いていきましょう。少しむずかしいコードなので詳細は明日解説していきますので流れだけ理解していきましょう。

・まずdocument.getElementById('target’)としてどこに対して処理をしたいのかを書いていきます。今回はidで名前をつけた’target’に対して処理をしたいのでこのように書いていきます。

・続けてイベントのトリガーを決めたいので.addEventListener('click', () => {});と書いていきます。今回はクリックしたら指定の処理をしたいのでclickとします。この{}の中に処理の内容を書いていきます。

clickイベントの設定

・今回はクリックしたら背景色が変わるように処理をしたいので{}内でもう一度’target’を呼び出してstyleのbackgroundをredにします。

・document.getElementById('target').style.background = 'red’;というように書いていけばいいでしょう。

・改行なども癖があって最初はわからないかもしれませんが上のスクショを見ながらどこがどの部分に当たるのかを覚えておきましょう。

・明日今回のコードを更に詳しく解説した記事をアップします。