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:
JavaScript
x
37
37
1
<%@ page language="java" contentType="text/html; charset=UTF-8"2
pageEncoding="UTF-8"%>3
<!DOCTYPE html>4
<html lang="it">5
<head>6
<meta charset="UTF-8">7
<title>CheckUp - Homepage</title>8
<link rel="stylesheet" href="css/SharedCSS/Header.css" type="text/css"/>9
<link rel="stylesheet" href="css/SharedCSS/Footer.css" type="text/css"/>10
<link rel="stylesheet" href="css/HomepageCSS/CarouselSlider.css" type="text/css"/>11
<link rel="stylesheet" href="css/HomepageCSS/HomepageIcon.css" type="text/css"/>12
<meta http-equiv="X-UA-Compatible" content="IE=edge">13
<meta name="viewport" content="width=device-width, initial-scale=1.0" />14
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">15
</head>16
<body>17
<!-- INCLUSIONE HEADER -->18
<%@include file="Shared/Header.jsp"%> 19
20
<!-- INCLUSIONE SLIDER -->21
<%@include file="Homepage/CarouselSlider.jsp"%>22
23
<!-- INCLUSIONE ICONE -->24
<%@include file="Homepage/HomepageIcon.html"%>25
26
<!-- INCLUSIONE FOOTER-->27
<%@include file="Shared/Footer.jsp"%> 28
29
30
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>31
<script src="../js/HomepageJS/CarouselSlider.js" type="text/Javascript"></script>32
33
34
</body>35
</html>36
37
Here “CarouselSlider.js”:
JavaScript
1
33
33
1
var slideIndex = 1;2
showDivs(slideIndex);3
carousel();4
5
function plusDivs(n) {6
showDivs(slideIndex += n);7
}8
9
function showDivs(n) {10
var i;11
var x = document.getElementsByClassName("mySlides");12
if (n > x.length) { slideIndex = 1 }13
if (n < 1) { slideIndex = x.length };14
for (i = 0; i < x.length; i++) {15
x[i].style.display = "none";16
}17
x[slideIndex - 1].style.display = "block";18
}19
20
function carousel() {21
var i;22
var x = document.getElementsByClassName("mySlides");23
for (i = 0; i < x.length; i++) {24
x[i].style.display = "none";25
}26
slideIndex++;27
if (slideIndex > x.length) { slideIndex = 1 }28
x[slideIndex - 1].style.display = "block";29
30
setTimeout(carousel, 5000);31
}32
33
and “CarouselSlider.jsp”:
JavaScript
1
17
17
1
<%@ page language="java" contentType="text/html; charset=UTF-8"2
pageEncoding="UTF-8"%>3
4
<div class="w3-content w3-display-container">5
<img class="mySlides" src="Img/TAMPONE-CORONAVIRUS-COVID.jpg">6
<img class="mySlides" src="Img/test-udito.jpg">7
<img class="mySlides" src="Img/Prenota.jpg">8
<div class="w3-center w3-display-bottommiddle">9
<div class="w3-left" onclick="plusDivs(-1)">❮</div>10
<div class="w3-right" onclick="plusDivs(1)">❯</div>11
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>12
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>13
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>14
</div>15
</div>16
17
UPDATE: I solved. it was a path problem. I used “../” instead of “./”
Advertisement
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.
JavaScript
1
2
1
<script src="../correct/path/to/js/file.js"></script>2