MaterializeのParallaxで画像が1つしか読み込まれない

MaterializeのParallaxで画像が1つしか読み込まれません。
Developer Toolsではエラーが出ておらず、1つ目の画像は問題なく読み込まれているという点から、2つ目がなぜ表示されないのかわかりません。

以下のコードで間違っている点や修正すべき点を教えていただきたいです。

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <!--MaterializeCSS-->
6    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
8    <!--Google Web Font-->
9    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
10    <!--CSS-->
11    <link rel="stylesheet" href="css/styles.css" type="text/css" />
12    <title>案件追加画面</title>
13  </head>
14  <body>
15      
16    <div class="parallax-container">
17      <div class="parallax"><img src="img/test.jpg"></div>
18    </div>
19    <div class="section white">
20      <div class="row container">
21        <h2 class="header1">Parallax</h2>
22        <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
23      </div>
24    </div>
25    <div class="parallax-container">
26      <div class="parallax"><img src="img/test.1.jpg"></div>
27    </div>
28
29<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
30<script>
31    const para = document.querySelector('.parallax');
32    M.Parallax.init(para,{});
33</script>
34  </body>
35</html>

##追記
別HTMLですが、

Materializeのdatepickerを同一ファイル内に2つ読み込もうとすると、

こちらも最初のdatepickerしか作動しませんでした。

同一ファイル内に同じJavascriptを読み込もうとすると、最初の1つしか作動しないのはこちらのParallaxと同じ事象かと思います。

このような問題を解決するためにはどのような対策が必要でしょうか。

以下は、datepickerが最初の1つしか作動しないコードです。

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <!--MaterializeCSS-->
6    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
8    <!--Google Web Font-->
9    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
10    <!--CSS-->
11    <link rel="stylesheet" href="../css/styles.css" type="text/css" />
12    <title>案件追加画面</title>
13  </head>
14  <body>
15    <!--サイドメニューここから-->
16    <div class="row">
17      <div class="col s0 l2">
18        <ul id="slide-out" class="sidenav sidenav-fixed ">
19          <li><a href="../index.html">クライアント一覧<i class="material-icons left">person</i></a></li>
20          <li><a href="#">案件カレンダー<i class="material-icons left">date_range</i></a></li>
21          <li><a href="addClient.html">クライアント追加<i class="material-icons left">add</i></a></li>
22          <li><a href="addItem.html">案件追加<i class="material-icons left">add</i></a></li>
23        </ul>
24      </div>
25    <!--サイドメニューここまで-->
26      <div class="col s12 offset-l1 l8">
27      <nav class="header">
28          <a href="#" data-target="slide-out" class="sidenav-trigger btn-floating"><i class="medium z-depth-1 material-icons">add</i></a>
29      <h2 class="center-align">案件追加</h2>
30      </nav>
31      <form action="" method="POST">
32          <div class="input-field col s12">
33            <input id="last_name" type="text" class="validate">
34            <label for="last_name">〇〇に関するライティング依頼（一括登録あり）</label>
35          </div>
36          <div class="input-field col s12">
37            <input id="last_name" type="text" class="datepicker">
38            <label for="last_name">納期</label>
39          </div>
40          <div class="input-field col s12">
41            <input id="last_name" type="text" class="validate">
42            <label for="last_name">単価（文字単価対応）</label>
43          </div>
44          <div class="input-field col s12">
45            <input id="last_name" type="text" class="validate">
46            <label for="last_name">備考</label>
47          </div>
48          <input type="submit" value="案件編集" class="waves-effect waves-light btn blue accent-1">
49          <input type="submit" value="案件削除" class="waves-effect waves-light btn red lighten-1">
50      </form>
51      </div>
52    </div>
53    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
54      <!--　サイドバーの初期化用JS　-->
55      <script>
56        document.addEventListener('DOMContentLoaded', function() {
57          var elems = document.querySelectorAll('.sidenav');
58          var instances = M.Sidenav.init(elems, {});
59        });
60      </script>
61      <!--datepickerの初期化用JS-->
62      <script>
63        const Calendar = document.querySelector('.datepicker');
64        M.Datepicker.init(Calendar,{});
65      </script>
66  </body>
67</html>

m.ts10806

2019/06/10 00:35

細かいですがDeveloper Toolsですね。（deveropperではないです）

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

回答2件

自己解決

javascript
1<script>
2    const para = document.querySelector('.parallax');
3    M.Parallax.init(para,{});
4</script>

上記のコードを

javascript
1<script>
2    const para = document.querySelectorAll('.parallax');
3    M.Parallax.init(para,{});
4</script>

にして解決。

投稿2019/06/10 22:24

HirakuMorishima

総合スコア29

考えられる原因は３つ。

1.CSSの読み込み順番。css/styles.cssのように自身で用意するファイルはCSSフレームワークのファイル読み込みよりあとの方が良い。基本は後勝ちです
2.css/materialize.cssとhttps://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
Materialize本体を2回読み込んでいるように見受けられますが、これはあまりよくないと思います。CDNのほうだけで良いでしょう。

html
1    <link rel="stylesheet" href="css/styles.css" type="text/css" />
2    <!--MaterializeCSS-->
3    <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
4    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
6

3.2.とほぼ同じですがMaterialize本体を3回読み込んでいるように見受けられますこれもCDNだけで良いでしょう。機能バッティングで正常動作しない恐れもあります。

js
1  <script src="js/materialize.js"></script>
2<script type="text/javascript" src="js/materialize.min.js"></script>
3<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>