Aide diaporama javascript

Version imprimable

BONjour,

J'ai réalisé un exercice de javascript mais il ne répond pas.
Voici l'énonce:

///
Créer une page contenant un diaporama de 3 images : une image qui change toutes les 2 secondes.

Astuce : créer un compteur qui s'incrémente et l'attribuer à la source de la balise img.

Les images devront donc être nommées par des chiffres. Exemple: 1.jpg

Voici mon
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html> <html> <head> <title>exercice15</title> <meta charset="UTF-8"> <link rel="stylesheet" > <script src="ex15.js"></script> </head> <body> <img src="imagesDiapo/1.jpg" name="Image" id="Image"/> </body> </html> JS var limite = 4; var compteur = 1; function defile(){ compteur++; if(compteur>=limite){ compteur =1; } document.getElementById("Image").setAttribute("src=imagesDiapo/.jpg", compteur+"imagesDiapo/.jpg"); } function diapo(){ setInterval(defile,2000); } window.addEventListener("load",diapo);
Je ne comprends pas ce qui ne va pas...
Merci pour vos réponses!
Lucie

16/11/2017, 21h46
eleydet

Bonsoir,

Code:

document.getElementById("Image").setAttribute("src", "imagesDiapo/"+compteur+".jpg");

Salut

En plus, il te manque les balises <script>.....</script> pour entourer la partie de code JavaScript.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <title>exercice15</title>
    <meta charset="UTF-8">
 
    <link rel="stylesheet" >
    <script src="ex15.js"></script>
 
</head>
<body>
	<img src="imagesDiapo/1.jpg" name="Image" id="Image"/>
 
	<script>
        var limite = 4;
        var compteur = 1;
        function defile(){
                compteur++;
                if(compteur>=limite){
                        compteur =1;
                }
                document.getElementById("Image").setAttribute("src", "imagesDiapo/"+compteur+".jpg");
        }
        function diapo(){
                setInterval(defile,2000);
        }
        window.addEventListener("load",diapo);
        </script>
 
</body>
 
</html>

17/11/2017, 00h28
Watilin

Bonsoir,

pour diagnostiquer un script qui ne marche pas, il faut commencer par s’équiper des outils nécessaires. En l’occurence la console F12 et son inspecteur d’éléments, qui te permet de voir en direct les modifications que ton script fait dans la page. Tu pourras y voir que les valeurs d’attributs src ne sont pas bonnes.

Pour le reste, je crois que eleydet et ProgElecT ont déjà donné la réponse :)