如何让我的 javascript 函数在 head 标签内工作？

Question

感谢您帮助我！抱歉，如果我措辞有误或给您造成了额外的时间。

我有一套代码，其实就是我在W3Schools上学的一段javascript。该代码为我的艺术创建了一个简单的幻灯片。 Here is the W3Schools Link

我不喜欢我的 javascript 代码遍布我的 HTML，我通常通过使用 onload 事件来解决简单的问题，这样我的所有 javascript 都可以留在脑海中。我还是新手，真的很感激你的任何见解。我想学，不是你给我做的。

这是我的脚本，目前，我必须将它放在正文标签的末尾才能正常工作。当我将它放入外部 js 文件并将该文件链接到头部时，它会像我预期的那样失败。我的问题是我不知道如何解决将复杂代码（即多个函数）放入头部的问题。通常在单个函数上，这是我目前所需要的，我会在该函数上附加一个 onload 事件。

谁能告诉我如何将这组脚本放在一个外部文件中并将其链接到 head 标签中？

Here is my website, I have left it broken in case you want to see the console log errors. The slideshow is down the page halfway and on page load it shows all three images in the slideshow. When you click the left and right arrows it will change and look normal.

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

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

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

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

<div class="slideshow-container">

    <div class="slides fade">
        <div class="slide-number">1 / 3</div>
        <img src="images/bballhoop.jpg" alt="Ball Is Life" style="width:100%">
        <div class="text">"Ball Is Life"</div>
    </div>

    <div class="slides fade">
        <div class="slide-number">2 / 3</div>
        <img src="images/portrait.jpg" alt="Portait of Child" style="width:100%">
        <div class="text">"Portait of Child"</div>
    </div>

    <div class="slides fade">
        <div class="slide-number">3 / 3</div>
        <img src="images/truckdrawing.jpg" alt="Visions of Old Times" style="width:100%">
        <div class="text">"Visions of Old Times"</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<div class="dots">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

Answer 1

您可以简单和最简单纯JavaScript方法是使用DOMContentLoaded函数，这意味着您的slideshow函数将在页面完全加载后运行并且准备好，这样它就不会抛出错误。

只需像下面这样包装您的slideshow 函数，一切都应该很好。

window.addEventListener('DOMContentLoaded', function() {
   //DOM is ready 
   console.log('DOM fully loaded and parsed');
   //Run slide show.
  showSlides(slideIndex);
});

Answer 2

如果您的 javascript 尝试操作尚未在 DOM 中的 HTML 对象，它将失败。诀窍是在页面完全加载/准备好之前不要运行您的 javascript。

您是否尝试过将“活动”代码放入在 DOM 准备好后触发的事件中？

$(window).on("load", function(){
   showSlides(slideIndex);
});

或者如果你有 jQuery：

$(document).ready(function() {
   showSlides(slideIndex);
});

养成按照执行顺序思考的习惯是个好主意。我看到您正在调用尚未“定义”的方法。尽管这在某些情况下可能有效（javascript 会在某些情况下“提升”函数和变量），但它仍然可能导致难以阅读的代码和错误。

我知道你才刚刚开始你的旅程，所以还有很多东西等着你去发现！祝你好运。