JS新手开发带轮播控制的幻灯片时遇plusSlides未定义等错误求助

你遇到的Uncaught ReferenceError: plusSlides is not defined错误，核心原因是：plusSlides、currentSlide这些函数被定义在DOMContentLoaded事件的回调函数内部，属于局部作用域，而HTML里的内联onclick属性只能访问全局作用域的函数，所以找不到这些方法。

下面提供两种可行的解决方法：

方案一：将函数暴露到全局作用域 #

把需要被HTML内联事件调用的函数挂载到window对象上，让全局作用域能访问到：

修改后的JavaScript代码：

document.addEventListener("DOMContentLoaded", function (){
    
    let slideIndex = 1;
    showSlides(slideIndex);

    // 挂载到window，让全局可访问
    window.plusSlides = function(n) {
        showSlides(slideIndex += n);
    }

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

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let 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";
    }

    setInterval(function() {
        plusSlides(1);
    }, 2000);

});

方案二：移除内联onclick，使用事件监听（推荐） #

这种方式更符合现代JavaScript开发规范，避免全局作用域污染，同时让逻辑代码和HTML结构分离：

修改HTML代码（移除所有内联onclick）： #

<html lang="ro-RO">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="design.css">
    <script src="script.js"></script>
<body>
            
    <div class="slideshow-container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 2</div>
            <img src="(1).jpg" width="395px" height="687px">    
        </div>
        <div class="mySlides fade">
            <div class="numbertext">2 / 2</div>
            <img src="(2).jpg" width="395px" height="687px">
        </div>
        <a class="prev">❮</a>
        <a class="next">❯</a>
    </div>
    <br>
            
    <div style="text-align:center">
        <span class="dot" data-slide="1"></span>
        <span class="dot" data-slide="2"></span>
    </div>
</body>
</html>

修改JavaScript代码（添加事件监听）： #

document.addEventListener("DOMContentLoaded", function (){
    
    let slideIndex = 1;
    const slides = document.getElementsByClassName("mySlides");
    const dots = document.getElementsByClassName("dot");
    const prevBtn = document.querySelector(".prev");
    const nextBtn = document.querySelector(".next");

    showSlides(slideIndex);

    // 绑定箭头按钮点击事件
    prevBtn.addEventListener('click', () => plusSlides(-1));
    nextBtn.addEventListener('click', () => plusSlides(1));

    // 绑定指示器点击事件
    for (let dot of dots) {
        dot.addEventListener('click', function() {
            currentSlide(parseInt(this.dataset.slide));
        });
    }

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

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

    function showSlides(n) {
        let i;

        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";
    }

    setInterval(function() {
        plusSlides(1);
    }, 2000);

});

补充说明：你之前遇到的Cannot read property 'style' of undefined错误，已经通过添加DOMContentLoaded事件监听解决，现在的核心问题是作用域导致的函数无法被内联事件访问。

内容的提问来源于stack exchange，提问作者Stefan Stef