main.js:11 Uncaught TypeError: Cannot set property 'src' of null

Question

При компиляции данного кода:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>javascrpt начало</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <h1>Js slider</h1>

  <div class="slider">
        <div class="slider__container" alt="slide container">
        <img
           class="slider__image__fade"
           alt="slider picture"
           src="imgs/locating-web-elements-selenium-1024x576-1.jpg.pagespeed.ce.XxRySezXJf.jpg"
        />
        </div>

        <div class="slide__controls">
          <button class="slider__nav-left" onclick="slide(-1)">&lt;</button>
          <button class="slider__nav-right" onclick="slide(1)">&gt;</button>
        </div>

        <script src="main.js"></script>
      </div>
    </body>
 </html>

Выдает данную ошибку :

Uncaught TypeError: Cannot set property 'src' of null
at slide (main.js:11)
at HTMLButtonElement.onclick (index.html:23)
slide @ main.js:11
onclick @ index.html:23

JS файл:

const img = document.querySelector('.slider__image')

 const imgArr = ['imgs/0_6e2K0U6ZkN9Ju9iL.jpg', 'imgs/locating-web-elements-selenium-1024x576- 
 1.jpg.pagespeed.ce.XxRySezXJf.jpg', 'imgs/nasledovanie_css.png']

 let currentIndex = 0;


 function slide(direction)
 {
     currentIndex += direction;
     img.src = imgArr[currentIndex];

 }

Файл стилей:

.slider__image__fade {
 height: 100%;
 width: 100%;
 object-fit: cover;
}

Answer 1

У вас класс называется slider__image__fade, а в JS ищете slider__image

БЛОГ НА HUSL

main.js:11 Uncaught TypeError: Cannot set property 'src' of null

Ответы (1 шт):