JS　画像　横スライド　エラー

前提・実現したいこと

JavaScriptで
矢印をクリックすると画像が切り替わる処理をしたいです。
１周目は問題なく動きます。

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

2週目に以下のエラーメッセージが発生しました。
エラーメッセージ
GET file:///D:/git_slider_js/slide_imags/undefined net::ERR_FILE_NOT_FOUND

```------HTML------
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js" defer></script>
  <title>Document</title>
</head>
<body>
  <div id="img_area" class="img_area">
    <p><img id="imgItem" class="imgItem" src="image/main_visual_2-0x0.jpg" alt=""></p>
    <p id="left" class="left"></p>
    <p id="right" class="right"></p>
  </div>
</body>
</html>

```Javascript

コード

const imgs = [
"./image/main_visual_2-0x0.jpg",
"./image/main_visual_6-0x0.jpg",
"./image/main_visual_7-0x0.jpg",
"./image/th_shutterstock_756071179.jpg",
];
const imgItem = document.getElementById('imgItem');
const left = document.getElementById('left');
const right = document.getElementById('right');
let count = 0;

right.addEventListener('click', function() {
count ++;
imgItem.src = imgs[count];
if(count >= imgs.length){
count = 0;
}
})


### 試したこと
1
ディレクトリを別にしていたのですべて同じディレクトリに保存してみました。
結果　同じエラーが発生

2
エラーを調べると
パスがちゃんと指定されていないとありますが
二週目の
imgs[0]だけがエラー発生します。
imgs[1]~[3]は表示されます。



初めての投稿で読みずらいと思いますがよろしくお願いします。

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

回答2件

自己解決

const imgs = [
"./image/main_visual_2-0x0.jpg",
"./image/main_visual_6-0x0.jpg",
"./image/main_visual_7-0x0.jpg",
"./image/th_shutterstock_756071179.jpg",
];

imgs.lengthの値は4
imgs[0]からimgs[3]になる
存在しないimgs[4]を呼びだしていたので
エラーが出ていました。

if(count > imgs.length)
ではなく
if(count >= 3)
または
if(count > (imgs.length - 1))
で解決しました！！！！

投稿2021/03/03 14:18

camellog

総合スコア0

js
1// if(count >= imgs.length){
2//          ↓
3   if(count > imgs.length){

投稿2021/03/03 03:40

kei344

総合スコア69596

camellog

2021/03/03 13:30

回答ありがとうございます。 kei344さんの回答を試しましたが変わらずエラーが発生します。ディレクトリ構造 slide_test index.html (ファイル) css (ディレクトリ) index.css (ファイル) image(ディレクトリ) main_visual_2-0x0.jpg (ファイル) main_visual_2-0x0.jpg (ファイル) main_visual_2-0x0.jpg (ファイル) main_visual_2-0x0.jpg (ファイル) js (ディレクトリ) index.js imgs配列に格納している画像のパスの指定はあっていますでしょうか？