Q&A
（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
ドットインストール はじめてのJavascript入門 #03について
ドットインストールで学習しており、動画で示されていた通りコーディングしたのですが、動画では要素が青からピンクに色が変更されましたが、いくらやっても青のままです。
どうしてなのでしょうか？？
使用しているPCはMacBook Airで、ブラウザはGoogle chromeです。
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>JavaScript Practice</title> 6 <style> 7 .box { 8 width: 100px; 9 height: 100px; 10 background: skyblue; 11 cursor: pointer; 12 } 13 </style> 14</head> 15<body> 16 <div class="box" id="target"></div> 17 18 <script> 19 'use strict'; 20 21 document.getElementById('target').addEventListener('click', () => { 22 document.getElementById('target').style.background = 'pink'; 23 }); 24 </script> 25</body> 26</html>
回答4件
0
JavaScriptはイベント駆動です。
「こういうイベントが起きた時に」「こういう処理をする」という書き方をします。
何もイベントが書いてなければ読み込んでこのコードを通った時に実行されますが、「画面ロード時に」というイベントも極力書いた方が良いです。
基本は役割分担です。明示することでコードの確度が上がります。
コードを読んでコードを理解しましょう。
全ての言語で通じる考え方です。
何かを参考に、またはコピペであっても、自身が書いたコードです。
全く理解できていなコードは採用すべきではありません。
分からなくても調べれば何かしら見つかります。調べ方も技術のうちです。
自身がこのコードにどこまで興味を持てているかで行動が違ってきます。
（質問内容にしっかり現れてますよ）
まずは興味を持つことから始めてください。
投稿2020/05/08 10:12
編集2020/05/08 10:13
総合スコア80875
0
ブラウザは何で動作確認をしていますか？
Chromeではクリックしたら青からピンクになるのを確認しました。
IE11の場合は動きませんでした。
=> という部分がありますがこれはアロー演算子と呼ばれるものです。
IEだと動かないのです。
IEも含めて動かすのであれば
javascript
1document.getElementById('target').addEventListener('click', function () { 2 document.getElementById('target').style.background = 'pink'; 3});
ですね。
投稿2020/05/08 09:16
編集2020/05/08 09:18
総合スコア349
0
ベストアンサー
そのまま、コードをコピペして、Firefox で表示したところ、青い箱をクリックした時点でピンクに色が変わりました。
javascript
1document.getElementById('target').addEventListener('click', () => { 2 document.getElementById('target').style.background = 'pink'; 3});
ここの所で要素がクリックされたら、背景色を変えるようにされています。
投稿2020/05/08 09:19
総合スコア1773
0
ブロックをクリックする。
投稿2020/05/08 09:30
総合スコア6
あなたの回答
tips
プレビュー
