Question

当我将JavaScipts代码放入html文件的标记中时，一切正常，但是当我将其置于外部.js文件中时，除1件事外，其他所有东西都起作用。加载页面时，它不会自动在幻灯片中加载图片，但是在HTML文件中时，会自动加载图片。

我的HTML标头：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/EindopdrachtTest.css">
    <script type="text/javascript" src="myTest1.js"></script>
</head>

我的HTML代码：

<div id="slide">

            <div class="mySlide">
                <div class="tipNumber">1 / 3
                </div>
                <img src="images/Tip1.jpg" class="slideImg">
                <div class="caption"> Studietips
                </div>
            </div>

            <div class="mySlide">
                <div class="tipNumber">2 / 3
                </div>
                <img src="images/tip2.jpg" class="slideImg">
                <div class="caption">
                    Studietips
                </div>
            </div>

            <div class="mySlide">
                <div class="tipNumber">3 / 3
                </div>
                <img src="images/tip3.jpg" class="slideImg">
                <div class="caption">
                    Studietips
                </div>
            </div>

            <!-- next and previous buttons-->

                 <button class="previous" onclick="slidePlus(-1)">&#10094; Prev</button>
                 <button class="next" onclick="slidePlus(+1)">Next &#10095;</button>


            <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>

我的JavaScript：

var slideIndex = 1;
showSlides(slideIndex);
var slides,dots;

function showSlides() {
    var i;
    slides = document.getElementsByClassName("mySlide");
    dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    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";
    setTimeout(showSlides, 8000); // Change image every 8 seconds
}

function slidePlus(position) {
    var i;
    slideIndex +=position;
    if (slideIndex> slides.length) {slideIndex = 1}
    else if(slideIndex<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";
}

function currentSlide(index) {
    var i;
    if (index > slides.length) {
        index = 1
    }
    else if(index < 1){
        index = 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[index-1].style.display = "block";
    dots[index-1].className += " active";
}

Answer 1

问题在于脚本已在DOM准备就绪之前加载。在body元素的末尾调用脚本，而不是在head元素中调用脚本，如下所示：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/EindopdrachtTest.css">
</head>
<body>
    <div id="slide">
            <div class="mySlide">
                <div class="tipNumber">1 / 3
                </div>
                <img src="images/Tip1.jpg" class="slideImg">
                <div class="caption"> Studietips
                </div>
            </div>
            <div class="mySlide">
                <div class="tipNumber">2 / 3
                </div>
                <img src="images/tip2.jpg" class="slideImg">
                <div class="caption">
                    Studietips
                </div>
            </div>
            <div class="mySlide">
                <div class="tipNumber">3 / 3
                </div>
                <img src="images/tip3.jpg" class="slideImg">
                <div class="caption">
                    Studietips
                </div>
            </div>
            <!-- next and previous buttons-->
                 <button class="previous" onclick="slidePlus(-1)">&#10094; Prev</button>
                 <button class="next" onclick="slidePlus(+1)">Next &#10095;</button>
            <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>
    </div>
    <script type="text/javascript" src="myTest1.js"></script>
</body>

当我将其放在外部文件中时，我的JavaScript代码不起作用

1 个答案: