jsで上手いことスライドショーができません。

jsでimg要素を動的に作り、slick.jsでスライドショーをしたいのですが上手くいきません。

ブラウザには何も表示されないです。

間違えてる所を教えてください。

矢印とドットナビゲーションも正しく表示されない。

イメージ説明

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

 Uncaught TypeError: div.appendChild is not a function

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <title>slide_show</title>
6        <script src="js/jquery-3.6.1.min.js"></script>
7        <link rel="stylesheet" href="css/slick.css">
8        <link rel="stylesheet" href="css/arrow.css">
9    </head>
10    <body>
11        <div class="div"></div>
12        <script src="js/slick.min.js"></script>
13        <script src=script.js></script>
14    </body>
15</html>

css
1.div{
2    margin-bottom: 50px;
3    width: 1000px;
4    height: 618px;
5    margin: 0 auto;
6}
7
8
9
10/*矢印の設定*/
11
12/*戻る、次へ矢印の位置*/
13.div-prev, 
14.div-next {
15    position: absolute;/*絶対配置にする*/
16	z-index: 3;
17    top: 42%;
18    cursor: pointer;/*マウスカーソルを指マークに*/
19    outline: none;/*クリックをしたら出てくる枠線を消す*/
20    border-top: 2px solid #ccc;/*矢印の色*/
21    border-right: 2px solid #ccc;/*矢印の色*/
22    height: 25px;
23    width: 25px;
24}
25
26.div-prev {/*戻る矢印の位置と形状*/
27    left:2.5%;
28    transform: rotate(-135deg);
29}
30
31.div-next {/*次へ矢印の位置と形状*/
32    right:2.5%;
33    transform: rotate(45deg);
34}
35
36/*ドットナビゲーションの設定*/
37
38.div-dots {
39	position: relative;
40	z-index: 3;
41    text-align:center;
42	margin:-50px 0 0 0;
43}
44
45.div-dots li {
46    display:inline-block;
47	margin:0 5px;
48}
49
50.div-dots button {
51    color: transparent;
52    outline: none;
53    width:8px;/*ドットボタンのサイズ*/
54    height:8px;/*ドットボタンのサイズ*/
55    display:block;
56    border-radius:50%;
57    background:#ccc;/*ドットボタンの色*/
58}
59
60.div-dots .div-active button{
61    background:rgb(0, 0, 0);/*ドットボタンの現在地表示の色*/
62}

js
1const img_src = ['./img/web1.png', './img/web2.png', './img/web3.png'];//スライドショー画像の配列
2
3const div = document.getElementsByClassName('div');
4
5for (const ingroup of img_src ) {
6
7    const img = document.createElement('img');
8    img.src = ingroup;
9    img.alt = 'テスト';
10    div.appendChild(img);
11}
12
13$('div').slick({
14    autoplay: true,//自動的に動き出すか。初期値はfalse。
15    autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間
16    speed:1000,//スライドの動きのスピード。初期値は300。
17    infinite: true,//スライドをループさせるかどうか。初期値はtrue。
18    slidesToShow: 1,//スライドを画面に3枚見せる
19    slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる
20    arrows: true,//左右の矢印あり
21    prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
22    nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
23    dots: true,//下部ドットナビゲーションの表示
24    pauseOnFocus: false,//フォーカスで一時停止を無効
25    pauseOnHover: false,//マウスホバーで一時停止を無効
26    pauseOnDotsHover: false,//ドットナビゲーションをマウスホバーで一時停止を無効
27});
28

回答1件

ベストアンサー

修正箇所

1箇所修正するだけで直りました。

diff
1- const div = document.getElementsByClassName('div');
2+ const [div] = document.getElementsByClassName('div');

不具合の原因

.getElementsByClassName()は要素を取得して配列のようなものに格納します。
たとえ該当する要素が1つしかなかったとしても、長さが1の配列を返します。

今回class="div"の要素は1つしかないと思うので、[div]と書いて分割代入するか、div[0]と1つ目（0番目）を指定してやればいいです。

しかし本来1つしか要素がないことが確定しているのであれば、idをつけて.getElementById()を使用した方がいいです。

矢印とドットがうまく表示されていない対策

クラス名が間違っていました
- 🚫 .div-prev → ✅ .slick-prev
- 🚫 .div-next → ✅ .slick-next
- 🚫 .div-dots → ✅ .slick-dots
詳細度がslickのデフォルトのCSSに負けていましたので、質問者様のCSSの詳細度を上げました
- 🚫 .slick-prev → ✅ .div .slick-prev

css
1/*矢印の設定*/
2
3/*戻る、次へ矢印の位置*/
4.div .slick-prev,
5.div .slick-next {
6  position: absolute;
7  /*絶対配置にする*/
8  z-index: 3;
9  top: 42%;
10  cursor: pointer;
11  /*マウスカーソルを指マークに*/
12  outline: none;
13  /*クリックをしたら出てくる枠線を消す*/
14  border-top: 2px solid #ccc;
15  /*矢印の色*/
16  border-right: 2px solid #ccc;
17  /*矢印の色*/
18  height: 25px;
19  width: 25px;
20}
21
22/* デフォルトの矢印を非表示 */
23.div .slick-prev::before,
24.div .slick-next::before {
25  content: none;
26}
27
28.div .slick-prev {
29  /*戻る矢印の位置と形状*/
30  left: 2.5%;
31  transform: rotate(-135deg);
32}
33
34.div .slick-next {
35  /*次へ矢印の位置と形状*/
36  right: 2.5%;
37  transform: rotate(45deg);
38}
39
40/*ドットナビゲーションの設定*/
41
42.div .slick-dots {
43  position: relative;
44  z-index: 3;
45  text-align: center;
46  margin: -50px 0 0 0;
47}
48
49.div .slick-dots li {
50  display: inline-block;
51  margin: 0 5px;
52}
53
54.div .slick-dots button {
55  color: transparent;
56  outline: none;
57  width: 8px;
58  /*ドットボタンのサイズ*/
59  height: 8px;
60  /*ドットボタンのサイズ*/
61  display: block;
62  border-radius: 50%;
63  background: #ccc;
64  /*ドットボタンの色*/
65}
66
67/* デフォルトのドットを非表示 */
68.div .slick-dots button::before {
69  content: none;
70}
71
72.div .slick-dots .slick-active button {
73  background: rgb(0, 0, 0);
74  /*ドットボタンの現在地表示の色*/
75}