将内联 javascript 转换为外部文件答案

【问题标题】：Convert inline javascript to external file将内联 javascript 转换为外部文件
【发布时间】：2019-06-27 01:58:35
【问题描述】：

我正在 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>

【问题讨论】：

标签： javascript html arrays carousel external-js

【解决方案1】：

因为currentSlide 不可全局访问（HTML 内联事件处理程序在全局范围内运行）。您需要在全局范围内定义它才能工作：

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

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

【讨论】：