スクロールしたら、クラスを追加する実装をしたいのですが、追加できない

JSでクラスを指定したい

スクロールしたら、JavaScriptで該当する要素にクラスを追加することを実装しています。

発生している問題

しかし、全くクラスが追加されず、クラス名のミスなどのスペルミスを探しましたが、解決できませんでした。

該当のソースコード

express　というクラス名のついた要素に　show　という要素を追加したいと思っています。要素はimgです。

Javascript
1  <script>
2    var scrollAnimationElm = document.querySelectorAll(".express");
3    console.log(scrollAnimationElm);
4    var scrollAnimationFunc = function(){
5      for(var i = 0; i < scrollAnimationElm.length; i++) {
6        var triggerMargin = 300;
7        if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
8          scrollAnimationElm[i].classList.add('show');
9        }
10      }
11    }
12    window.addEventListener('load', scrollAnimationFunc);
13    window.addEventListener('scroll', scrollAnimationFunc);
14   </script>

html
1<body class="container">
2  <script>
3    var scrollAnimationElm = document.querySelectorAll(".express");
4    var scrollAnimationFunc = function(){
5      for(var i = 0; i < scrollAnimationElm.length; i++) {
6        var triggerMargin = 300;
7        if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
8          scrollAnimationElm[i].classList.add('show');
9        }
10      }
11    }
12    window.addEventListener('load', scrollAnimationFunc);
13    window.addEventListener('scroll', scrollAnimationFunc);
14   </script>
15  
16  <main class="main">
17    <div class="profile">
18      <img class="profile_img" src="画像のリンク">
19      <div class="profile_content">
20        <p class="profile_name">名前</p>
21      </div>
22    </div>
23    <div class="history_gackground">
24      <h3>〜地域編〜</h3>
25      <div class="sized_img express--up express"><img src="画像のリンク"></div>
26      <img class="sized_img express--up express" src="リンク">
27      <img class="sized_img express--up express" src="リンク">
28    </div>
29    <div class="history_gackground">
30    <h3>〜地域編<img class="kuma_img" src="リンク">〜</h3>
31    
32    <img class="sized_img express--up express" src="リンク">
33    <img class="sized_img express--up express" src="リンク">
34    </div>
35    <div class="history_gackground">
36      <h3>〜地域編〜</h3>
37      <img class="sized_img express--up express" src="リンク">
38      <a href="別サイトへのリンク"><img class="sized_img express--up express" src="リンク"></a>
39      <img class="sized_img express--up express" src="リンク">
40      <img class="sized_img express--up express" src="リンク">
41      <img class="sized_img express--up express" src="リンク">
42    </div>
43  </main>
44
45</body>
46

css
1.container{
2  max-width: 1200px;
3  margin: 0 auto;
4  padding: 0px;
5}
6.main{
7  width: 100%;
8}
9
10.sized_img{
11  width:300px;
12  height:auto;
13  margin: 5px;
14  border-radius: 2px;
15  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5), 10px 10px 0px 0 rgba(0, 0, 0, .5) inset;
16}
17.express{
18  opacity: 0;
19  transition: all .5s ease;
20}
21.show{
22  opacity: 1;
23  transform: none;
24}
25.express--up{
26  transform: translate(0, 100px);
27}
28.kuma_img{
29  height: 33.6px;
30}
31
32.history_gackground{
33  /* background-color: #F8EFBA; */
34  margin-top: 10px;
35  margin-bottom: 10px;
36  padding: 10px;
37}
38
39.profile{
40  display: flex;
41  width: 500px;
42  margin: 0 auto;
43}
44.profile_img{
45  width:300px;
46  height:auto;
47  margin: 5px;
48  border-radius: 150px;
49}
50.profile_content{
51  position: relative;
52  top: 50px;
53  left: 30px;
54}
55.profile_name{
56  font-weight: bold;
57  font-size: 24px;
58}

初歩的な質問で申し訳ありませんが、アドバイスを頂けますでしょうか。

m.ts10806

2020/07/01 13:25

html、CSSも提示してください。「コピペで再現できる情報」が必要です。

KK0618

2020/07/01 13:37

承知しました。 >「コピペで再現できる情報」以後、意識します。

m.ts10806

2020/07/01 13:38

えーっと、「今回は対応しない」ということですか？質問は編集できるので、適宜対応してもらいたいんですが・・そのためのこの「質問への追記、修正依頼」のコメント欄です。

KK0618

2020/07/01 13:47

ただ今、編集致しました。言葉足らずで申し訳ありません。

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

回答1件

ベストアンサー

var scrollAnimationElm = document.querySelectorAll(".express");でexpressというクラス名のついた要素を取得しようとしていますが、この行は要素の準備が完了するより前に実行されているため要素が1つも取得できていません。

例えば以下のようにしてページのロードが完了した後にexpressというクラス名のついた要素を取得するようにしましょう。

javascript
1var scrollAnimationElm;
2window.addEventListener('load', function(){
3  scrollAnimationElm = document.querySelectorAll(".express");
4});

投稿2020/07/01 14:45

ku__ra__ge

総合スコア4524

KK0618

2020/07/01 15:53

ありがとうございます！うっかりミスでした^^; ご指摘して頂いた通りに修正しましたら、思った通りに動きました。本当に助かりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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