質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1402閲覧

JavaScriptのエラーの解決

piiiiman

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/29 07:56

編集2020/07/29 13:32

前提・実現したいこと

ドットインストールで 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">

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

投稿2020/07/29 07:59

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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_takatsuk

2020/07/29 10:43

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

2020/07/29 13:36

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

0

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

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

投稿2020/07/29 08:59

ihigaku

総合スコア71

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

piiiiman

2020/07/29 09:14

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

0

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を使っています、解決できました。ご指摘いただきありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問