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

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

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

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

解決済

Jsでフェードアウトを実装したい

HIroki
HIroki

総合スコア2

JavaScript

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

1回答

1グッド

2クリップ

305閲覧

投稿2022/08/23 03:12

前提

JavaScriptでローディング画面がフェードアウトするコードを制作しています。

実現したいこと

document.getElementByIdではなく、getElementsByClassNameでclass 指定をしたいです。

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

js.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
というエラーがでてしまいます。

```HTML <div id="loading" class="is-hide loading"> <div id="loading__logo" class="is-hide loading__logo"> <img src="loading__icon.png" alt="" class="loading__fadeUp"> </div> </div>

CSS

1/* 非表示 */ 2.is-hide { 3 display: none; 4} 5/* ローディング画面をフェードアウト */ 6.fadeout-bg { 7 transition-property: opacity; 8 transition-delay: .9s; 9 transition-duration: .8s; 10 opacity: 0; 11 pointer-events: none; 12} 13/* ローダーをフェードアウト */ 14.fadeout-loader { 15 transition-property: opacity; 16 transition-delay: .9s; 17 transition-duration: .3s; 18 opacity: 0; 19 pointer-events: none; 20} 21 22 23 24.loading { 25 position: fixed; 26 width: 100%; 27 height: 100%; 28 z-index: 900; 29 background: white; 30} 31 32.loading__logo { 33 position: absolute; 34 top: 50%; 35 left: 50%; 36 transform: translate(-50%, -50%); 37} 38 39.loading__logo img { 40 min-width: 15rem; 41 max-width: 30rem; 42 ; 43} 44 45.loading__fadeUp { 46 animation-name: fadeUpAnime; 47 animation-duration: 0.5s; 48 animation-fill-mode: forwards; 49 opacity: 0; 50} 51 52@keyframes fadeUpAnime { 53 from { 54 opacity: 0; 55 transform: translateY(100px); 56 } 57 58 to { 59 opacity: 1; 60 transform: translateY(0); 61 } 62}

CSS

1var bg = document.getElementsByClassName('loading'), 2 loader = document.getElementsByClassName('loading__logo'); 3bg.classList.remove('is-hide'); 4loader.classList.remove('is-hide'); 5 6/* 読み込み完了 */ 7window.addEventListener('load', stopload); 8 9/* 10秒経ったら強制的にロード画面を非表示にする */ 10setTimeout('stopload()',10000); 11 12/* ロード画面を非表示にする処理 */ 13function stopload(){ 14 bg.classList.add('fadeout-bg'); 15 loader.classList.add('fadeout-loader'); 16}
._.👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

var bg = document.getElementsByClassName('loading'),
loader = document.getElementsByClassName('loading__logo');

getElementsByClassNameで得られる値がHTMLCollectionだからでしょう

javascript

1const bg = document.querySelector('.loading'); 2const loader = document.queySelector('.loading__logo');

投稿2022/08/23 03:37

yambejp

総合スコア108962

._.👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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