Функция в JavaScript работает, только если я добавляю событие в HTML

Question

Я строю карусель с помощью JavaScript, и я столкнулся с проблемой. Так что проблема в том, что когда я добавляю событие в HTML (), моя карусель работает нормально. Но если я хочу добавить прослушиватель событий в JavaScript, я не знаю почему, но больше не работает. Я добавлю 2 разных фрагмента кода, может быть, вы можете сказать мне, в чем здесь проблема?

var slideIndex = 1;
showSlides(slideIndex);


let next = document.querySelector('.next');
let prev = document.querySelector('.prev');


next.addEventListener('click', plusSlides(1))
next.addEventListener('click', plusSlides(-1))
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
} 

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: .95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
 max-width: 1000px;
  margin: auto;
  position: relative;
}

#section-one .slideshow-container .mySlides {
  display: none;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

 <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div class="slideshow-container">
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
              alt="image1"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt="image2"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
              alt="image3"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
      <a class="prev"></a>
  <a class="next"></a>
      </div>
    </section>

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
} 

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: .95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
 max-width: 1000px;
  margin: auto;
  position: relative;
}

#section-one .slideshow-container .mySlides {
  display: none;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

 <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div class="slideshow-container">
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
              alt="image1"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt="image2"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
              alt="image3"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
      <a class="prev" onclick="plusSlides(-1)"></a>
  <a class="next" onclick="plusSlides(1)"></a>
      </div>
    </section>

Answer 1

В вашем коде было несколько проблем.

• Во-первых, не было элемента с классом точка , я думаю, вы говорите о img
• Во-вторых, вы назначали оба события щелчка одному и тому же элементу далее
• В-третьих, вы неправильно назначали событие клика. Итак, ваше мероприятие назначено

должно быть так:

next.addEventListener('click', function() {plusSlides(1);})
prev.addEventListener('click', function() {plusSlides(-1);})

Таким образом, ваша функция будет вызвана не сразу, а только при нажатии кнопки.

Ниже я предоставляю весь код, который работает нормально.

var slideIndex = 1;
showSlides(slideIndex);


let next = document.querySelector('.next');
let prev = document.querySelector('.prev');


next.addEventListener('click', function() {plusSlides(1);})
prev.addEventListener('click', function() {plusSlides(-1);})
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("img");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
} 

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: .95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
 max-width: 1000px;
  margin: auto;
  position: relative;
}

#section-one .slideshow-container .mySlides {
  display: none;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

<section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div class="slideshow-container">
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
              alt="image1"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt="image2"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="mySlides">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
              alt="image3"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
      <a class="prev"></a>
  <a class="next"></a>
      </div>
    </section>

Answer 2

Вы хотите убедиться, что элементы DOM, которые вы используете в функции showSlides , загружены, прежде чем пытаться их найти; поэтому оберните первый вызов showSlides () (во второй строке) в прослушивателе событий так:

document.addEventListener('DOMContentLoaded', function () {
    showSlides(slideIndex);
});