I am having trouble linking my JavaScript to my HTML

Question:
I am trying to get my image slideshow to work, however my JS won’t link to my HTML so it won’t work. I am trying to use W3Schools to make it work

Current behavior:
Images won’t appear, and JavaScript doesn’t link

Desired behavior
Images appear, slideshow works properly

Repl link:

code snippet
		<div class="mySlides fade">
			<div class="numbertext">1 / 4</div>
			<img src= "ProjectDelta/CM1.png" style= "width:50%">
			<h11>Commander Muñoz 1</h11>
		</div>

		<div class="mySlides fade">
			<div class="numbertext">2 / 4</div>
			<img src= "ProjectDelta/CM2.png" style="width:50%">
			<h11>Commander Muñoz 2</h11>
		</div>

		<div class="mySlides fade">
			<div class="numbertext">3 / 4</div>
			<img src= "ProjectDelta/TP1.png" style="width:50%">
			<h11>The Phoenix 1</h11>
		</div>

		<div class="mySlides fade">
			<div class="numbertext"> 4 / 4</div>
			<img src= "ProjectDelta/TP2.png" style="width:50%">
			<h11>The Phoenix 2</h11>
		</div>


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

	<div style="text-align:center">
		<span class="dot" onclick="currentSlide(1)"></span> 
		<span class="dot" onclick="currentSlide(2)"></span> 
		<span class="dot" onclick="currentSlide(3)"></span>
		<span class="dot" onclick="currentSlide(4)"></span>
	</div>

Hello @KAISHOAFF and welcome to the community!

Can you please provide the link to your repl? I noticed that you build a good slideshow but we need to see the others parts of the code and any files you might have (since I’m not seeing you incluiding your javascript file in your html with <script>)

Here: https://replit.com/@KAISHOAFF/Conquered-Studios?v=1
The slide show is on ProjectDelta.html

The paths are ok… I saw no issue within the code too.

What can happen, is that sometimes, the JavaScript might try to manipulate DOM elements before they are fully loaded. Try to wrap your JavaScript code inside a DOMContentLoaded event listener.

Like this:

document.addEventListener('DOMContentLoaded', (event) => {
    let slideIndex = 1;
    showSlides(slideIndex);

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

    function currentSlide(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";
    }

    window.plusSlides = plusSlides;
    window.currentSlide = currentSlide;
});

Also, make a hard refresh after you change anything (Ctrl + F5 in chrome).

Thank you, that seemed to help make the image work, however now the arrows aren’t working so I can’t rotate between images. Did I put something in wrong?

Oh sorry, I forgot that since we defined plusSlides inside the DOMContentLoaded event it’s not globally accessible anymore.

Include the plusSlides and the currentSlideinside the DOM too:

document.addEventListener('DOMContentLoaded', (event) => {
	let slideIndex = 1;
	showSlides(slideIndex);

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

	function currentSlide(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";
	}

    // Expose to global scope
    window.plusSlides = plusSlides;
    window.currentSlide = currentSlide;
});
1 Like

Thank you so much! It works perfectly now! Words cannot express my gratitude!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.