My JavaScript code doesn't work when I put it in an external file

Question

When I put my JavaScipts code in the tags in my html file everything works, but when I put it in an external .js file, everything but 1 thing works. When loading the page it doesn't load a picture in my slideshow automatically, but when in my HTML file it does do that.

My HTML header:

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

My HTML code:

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

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

Because you are loading JS file before HTML. Put your script in the end of the `body` tag and wrap your JS code with `onload` event — Observer, Oct 17 '18 at 18:31

score 0 · Answer 1 · answered Oct 17 '18 at 18:59

The problem is that the script is loading before the DOM is ready. Call the script at the end of the body element instead of calling it in the head element, like this:

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

My JavaScript code doesn't work when I put it in an external file

1 Answers1