JavaScriptのエラーの解決

前提・実現したいこと

ドットインストールで JavaScriptの学習をしていて、エラーを解決したいです

スカイブルーのボックスをクリックするとピンクの円が出てくるようにしたいです

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught TypeError: Cannot read property 'addEventListener' of null
    at index.html:20``

###コード

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-color: 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    document.getElementById('target').addEventListener('click',() => {
21      document.getElementById('target').style.background = 'pink';
22      document.getElementById('target').style.borderRadius='50%'});
23     </script>
24  </body>
25</html>

試したこと

学習の動画内の通りコードを書いてみましたが、反映されませんでした

補足情報（FW/ツールのバージョンなど）

VSコードを使っています
よろしくお願い致します

###修正前

HTML
1<div class="box">

###修正後

HTMl
1<div class="box" id="target">

行動規範の内容に同意します

回答3件

ベストアンサー

どこにもtargetというidを持った要素がありません

投稿2020/07/29 07:59

m.ts10806

総合スコア80875

piiiiman

2020/07/29 08:11

回答ありがとうございます。ご指摘いただいて<div class="box" id="target">としたのですが、エラーメッセージが出てしまいます Uncaught TypeError: Cannot read property 'addEventListener' of null at index.html:20

m.ts10806

2020/07/29 08:48

回答がついた質問の編集は慎重にしてください。回答を得て修正したのでしたらその旨を明記しないと、「質問で起きていない現象」についての回答になってしまいます。ひとまず、コードはマークダウンのcode機能を利用してご提示ください。

piiiiman

2020/07/29 08:56

かしこまりました。ご指摘ありがとうございます

piiiiman

2020/07/29 09:24

解決できました、ありがとうございました

m.ts10806

2020/07/29 09:46

コードのマークダウンは今からでもしておいてください。質問時は「回答者への配慮」で解決後は「あとから見る人への配慮」です。

m.ts10806

2020/07/29 09:47

それに、結局私のアドバイスで解決できたことになりませんか。細かいですが。

miyabi_pudding

2020/07/29 10:43

piiiimanさん > いいんですが、m.ts10806さんの回答でBAにすべきだと思います。また解決したから終了ではなく、解決後も質問文を修正すべきです。 (コードブロックにする部分特に)

piiiiman

2020/07/29 13:36

今、マークダウンしてみました。ご指摘いただき、本当にありがとうございます。

行動規範の内容に同意します

修正後のソースで動きましたよ

ブラウザで動かそうとしているのであれば、キャッシュを削除してみては？

投稿2020/07/29 08:59

ihigaku

総合スコア71

piiiiman

2020/07/29 09:14

解決できました、ありがとうございました

行動規範の内容に同意します

use strict; → "use strict";

投稿2020/07/29 08:37

gogoweb_ikeda

総合スコア1426

piiiiman

2020/07/29 08:50

回答ありがとうございます。ご指摘いただいた箇所を変更したのですが、エラーメッセージが変わりません index.html:20 Uncaught TypeError: Cannot read property 'addEventListener' of null at index.html:20 コードの該当箇所にマウスを持っていくと以下のようなメッセージが出てきます method) HTMLElement.addEventListener<"click">(type: "click", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)

gogoweb_ikeda

2020/07/29 09:01

そのまま上のソースをコピーして貼り付けたhtmlで正常に動作しました。使用しているブラウザはChromeですか？エラーメッセージからして違うと思いますが万が一IEの場合はアロー構文が使用できません。 document.getElementById('target')で要素を取得できていないように見えますのでもう一度idの指定を確認してみてください。 console.log(document.getElementById('target'))で要素がconsoleにでますか？nullの場合は取得できていません。

piiiiman

2020/07/29 09:23

Chromeを使っています、解決できました。ご指摘いただきありがとうございました

行動規範の内容に同意します

あなたの回答