Javascript doesn’t work if it’s linked from jsp in my project

my js doesn’t work in my dynamic web project if I linked it from a jsp, but if i put it in the jsp it works fine. Same for every js code. I don’t know what to do, jquery is imported… The javascript code is correct because it work fine in the same jsp, but if I put it in a *.js file it doesn’t work. Here’s my code:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>CheckUp - Homepage</title>
    <link rel="stylesheet" href="css/SharedCSS/Header.css" type="text/css"/>
    <link rel="stylesheet" href="css/SharedCSS/Footer.css" type="text/css"/>
    <link rel="stylesheet" href="css/HomepageCSS/CarouselSlider.css" type="text/css"/>
    <link rel="stylesheet" href="css/HomepageCSS/HomepageIcon.css" type="text/css"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
    <!-- INCLUSIONE HEADER -->
    <%@include file="Shared/Header.jsp"%> 
    
    <!-- INCLUSIONE SLIDER -->
    <%@include file="Homepage/CarouselSlider.jsp"%>

    <!-- INCLUSIONE ICONE -->
    <%@include file="Homepage/HomepageIcon.html"%>
    
    <!-- INCLUSIONE FOOTER-->
    <%@include file="Shared/Footer.jsp"%> 
    
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../js/HomepageJS/CarouselSlider.js" type="text/Javascript"></script>
    

</body>
</html>

Here “CarouselSlider.js”:

var slideIndex = 1;
showDivs(slideIndex);
carousel();

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length };
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) { slideIndex = 1 }
    x[slideIndex - 1].style.display = "block";

    setTimeout(carousel, 5000);
}

and “CarouselSlider.jsp”:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<div class="w3-content w3-display-container">
    <img class="mySlides" src="Img/TAMPONE-CORONAVIRUS-COVID.jpg">
    <img class="mySlides" src="Img/test-udito.jpg">
    <img class="mySlides" src="Img/Prenota.jpg">
    <div class="w3-center w3-display-bottommiddle">
        <div class="w3-left" onclick="plusDivs(-1)">❮</div>
        <div class="w3-right" onclick="plusDivs(1)">❯</div>
        <span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
    </div>
</div>

UPDATE: I solved. it was a path problem. I used “../” instead of “./”

Answer

Check your console and verify the file is actually loading. Most likely you have a bad path.

Also your type attribute is bad. In HTML5 it is also redundant just remove it.

<script src="../correct/path/to/js/file.js"></script>

Advertisement

Answer