Конвертировать встроенный JavaScript во внешний файл

Question

Я работаю на карусели в w3school. На самом деле у них есть встроенный код JavaScript, и я пытаюсь преобразовать его во внешний файл JavaScript. У меня есть этот код в моем внешнем файле

window.addEventListener('DOMContentLoaded', function () {
    var slideIndex = 1;
    showSlides(slideIndex);

    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";
    }
}, false);

Но когда я перемещаюсь по карусели, отображается ошибка Uncaught ReferenceError: currentSlide is not defined at HTMLSpanElement.onclick и не работает / не перемещается по изображениям в карусели

Это HTML код

<div class="slideshow">
  <div class="slideshow-container">
      <div class="mySlides fade">
        <img class="carousel-item" src="https://lorempixel.com/800/400/food/1">
      </div>
      <div class="mySlides fade">
        <img class="carousel-item" src="https://lorempixel.com/800/400/food/2">
      </div>
  </div>

  <div class="slide-nav">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span>
  </div>
</div>
<script type="text/javascript" src="js/components.js"></script>

Answer 1

Поскольку currentSlide недоступен глобально (встроенные обработчики событий HTML выполняются в глобальной области видимости). Вам нужно определить его в глобальной области видимости, чтобы он работал:

function currentSlide(n) {
    showSlides(slideIndex = n);
}

window.addEventListener("DOMContentLoaded", function() {...}, false);