不断出现 Uncaught ReferenceError: nextSlide is not Defined 和 Uncaught ReferenceError: prevSlide is not Defined

Question

我正在尝试设置一个简单的 4 幻灯片幻灯片放映，但似乎无法定义幻灯片以及“下一张”和“上一张”按钮每次都起作用。

我是 JavaScript 新手。它似乎不想让我发布更多代码，但如果您需要 CSS，请告诉我。

<div class="TRACEhomeslider-container">
  <div class="TRACEhomeslider-navigation-container">
    <button class="TRACEhomeslider-nav-arrow TRACEhomeslider-prev" onclick="prevSlide()">
      <img src="https://imagedelivery.net/Dm4SjjHdI1AmGqmp0CD9RQ/7131a27f-82a1-4be1-0fb1-623ef0dc0d00/public" alt="Previous">
    </button>
  </div>
  <div class="TRACEhomeslider-slider">
    <div class="TRACEhomeslider-slides">
      <div class="TRACEhomeslider-slide" id="slide1">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=1" alt="Random Image 1">
          <div>
            <h2>My Badges and Awards</h2>
            <p>Check out your completion badges, view your awards, and share your accomplishments on social media</p>
            <button>Lea`your text`rn More</button>
          </div>
        </div>
      </div>
      <div class="TRACEhomeslider-slide" id="slide2">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=2" alt="Random Image 2">
          <div>
            <h2>Dog's Awards</h2>
            <p>Explore the badges and awards earned by this diligent dog.</p>
            <button>Discover More</button>
          </div>
        </div>
      </div>
      <div class="TRACEhomeslider-slide" id="slide3">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=3" alt="Random Image 3">
          <div>
            <h2>Hamster's Trophies</h2>
            <p>Find out about the trophies won by this hard-working hamster.</p>
            <button>Learn More</button>
          </div>
        </div>
      </div>
      <div class="TRACEhomeslider-slide" id="slide4">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=4" alt="Random Image 4">
          <div>
            <h2>Bird's Achievements</h2>
            <p>Discover the amazing achievements of this talented bird.</p>
            <button>Find Out More</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="TRACEhomeslider-navigation-container">
    <button class="TRACEhomeslider-nav-arrow TRACEhomeslider-next" onclick="nextSlide()">
      <img src="https://imagedelivery.net/Dm4SjjHdI1AmGqmp0CD9RQ/03165062-4249-449d-72cb-c35efa7b1000/public" alt="Next">
    </button>
  </div>
</div>

let currentSlide = 0;
const slides = document.querySelectorAll('.TRACEhomeslider-slide');
const totalSlides = slides.length;

function showSlide(slideIndex) {
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${(index - slideIndex) * 100}%)`;
  });
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % totalSlides;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  showSlide(currentSlide);
}

// Define the functions globally
window.nextSlide = nextSlide;
window.prevSlide = prevSlide;

document.addEventListener('DOMContentLoaded', () => {
  showSlide(currentSlide);
});

Answer 1

你是不是在html文件中添加了defer on script标签，所以它会等待页面加载后再运行js，如：