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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

6786閲覧

Uncaught TypeError: Cannot read property ‘display’ of undefined というエラーの対処法

nnn_syo_nnn

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/01/31 15:46

前提・実現したいこと

JavaScriptを利用して『ボタンをクリックしたときに要素を開いたり閉じたりする』というアニメーションを実装しようとしています。
しかし、「Uncaught TypeError: Cannot read property ‘display’ of undefined」というエラーメッセージが表示されてしまい、実装することができません・・・

エラーの対処方法を教えてください。

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

Uncaught TypeError: Cannot read property ‘display’ of undefined

該当のソースコード

HTML

1<html> 2 <head> 3 (省略) 4 </head> 5 6 <body> 7 <div class="submit"> 8 <input type="submit" name="chat" id="chat-submit" value=”開く" onclick="ffffBtn();"> 9 </div> 10 11 <div class="container"> 12 (省略) 13 </div> 14 15 <script type="text/javascript" src="script.js"></script> 16 </body> 17</html> 18

JavaScript

1 2document.getElementsByClassName("container").style.display = "none"; 3 4function ffffBtn(){ 5 const zzzz = document.getElementsByClassName('container'); 6 7 if(chat.style.display = "block"){ 8 zzzz.style.display = "none"; 9 } else { 10 zzzz.style.display = "block"; 11 } 12}

試したこと

ファイル(<script type="text/javascript" src="script.js"></script>)の読み込み位置、スペルチェックなどは行いました。

また、こちらの記事(https://sbfl.net/blog/2019/02/01/javascript-error-messages/)を読んだのですが、
”エラーの理由:undefinedの’プロパティ名’にアクセスしている” ・・・・・どういうこと??? という状態です。

JavaScriptの学習を初めて3日目なので、右も左もわからない素人ですが、教えていただけると幸いです。

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

https://itsakura.com/javascript-display#s1
こちらの記事を参考にしました。

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

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

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

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

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

guest

回答3

0

同じ問題での投稿って結構あると思います(ここ1週間内でも2回くらい回答した気がする)
[getElementsByClassName tag:JavaScript] の検索結果: 401件

投稿2020/01/31 19:16

m.ts10806

総合スコア80850

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

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

0

【Element.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName

elements は見つかった複数の要素のライブな HTMLCollection です

【getElementsByClassNameとgetElementByIdの返り値の違い - Qiita】
https://qiita.com/rindarinda5/items/c26dc81fe8cd98992dc1

投稿2020/01/31 19:05

kei344

総合スコア69407

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

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

0

ベストアンサー

エラーの対処方法

  1. 簡単な英語なので、翻訳してでも読む。(これは出来ていると思います)
  2. 関連する行が開発者コンソールに示されているので、クリックしてソースの該当箇所を知る
  3. 該当箇所付近で利用している関数の引数と返値/構文等に誤りがないかを確認する。

DOMのAPI (ご質問では document.getElementsByClassName() )と思われます。

  • getElementsByClassName()

もコンピュータに対する英語の命令文です
(「getしろ、複数の要素(を)、class名(で)」というイメージ)。
コンピュータで示される英語は、直訳する必要はないです。


追記)

JavaScriptの学習を初めて3日目なので

どんな言語も、慣れないうちは、ワンライナーで短く書くことより、
「1行に1文」という「愚直な方法を取る」と身につきやすいですよ。

投稿2020/01/31 22:30

編集2020/01/31 22:46
AkitoshiManabe

総合スコア5432

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問