Javascript ページ読み込んだら別の画面を呼び出す方法

codepenにて仮で自分のサイトを作成しようと思い、画面を読み込む間ロード中のアニメーションをCSSで表示させ、読み込み終えた後で関数でアニメーションを消す動作をHTML内に書き込んだのですが全く反応がありません。

実際に記述した場所→　https://codepen.io/kazunaru/pen/jdxLby


document.getElementsClassName("sk-cube-grid").style["display"]="none";
document.getElementById("meinsite").style["display"]="inline";

ページを読み込むのが完了したらクラスを読み取り、ロードのアニメーションを非表示にしてメインテキストのidを取得して表示させる。

という動作をしたいのですが実際にはメインテキストが隠れたままでロードのアニメーションが残ったままです。codeペンにJSを書く際何度か読み取ってもらえず実行できないこともありました。

　HTMLにJSを書く場所がおかしいのかまたはそもそも記述がおかしいのかご教示願いたいです。
また、まだHTML,CSS,javascriptを学んで１か月も経たないのでコードの読みにくさや記述がおかしいところが多々あると思いますがその辺も併せて何かアドバイス頂けましたら幸いです。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2019/02/17 22:56

こんばんは

ざっと目を通しただけなので、確認はしていませんが・・・

＞document.getElementsClassName("sk-cube-grid")
部分でエラーになって停止しているのではないでしょうか？
また、getElementsByClassName で取得するのは要素そのものではなく、NodeListと言われる要素の配列的なオブジェクトですので、それに応じた扱い方をする必要があります。
https://developer.mozilla.org/ja/docs/Web/API/Do …

この回答へのお礼

おっしゃる通りでClassの部分をIdに変えたところ、上手くロード読み込み時にメインテキストが反映されました。ロードのアニメーションはCSSで他のページを丸パクリしたところあり実際に理解できていなかったため今度から調べなおしてから実行するようにします。ありがとうございました

お礼日時：2019/02/18 03:01