Affichage d'un petit code en javascript

Version imprimable

Bonjour,

J'ai un code tres simple en javascript qui me permet de faire un diaporama.
Mon probleme c'est que lorsque je le teste chez moi, sur dd ca fonctionne mais une fois en ligne il ne fonctionne pas.

Pourriez vous m'aider ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script language="JavaScript"> var i = 1; function affiche(numero) { i = numero; if (i==1) i=2; if (i==19) i=18; document.img.src = i+'.png'; } </script> <body background="fond.png"> <div align="center"> <img name="img" src="2.png""><br> <a OnClick="affiche(i-1)"><img src="f1.png"></a> <a OnClick="affiche(i+1)"><img src="f2.png"></a> <a href="http://bull100.pagesperso-orange.fr/marion/marion/tome1.html">sortir</a> </div> </body>
et en ligne : http://bull100.pagesperso-orange.fr/bd/page.html

03/03/2019, 21h06
eleydet
Bonsoir,

Je suis allé sur le site http://bull100.pagesperso-orange.fr/bd/page.html avec Firefox, j'ai appuyé simultanément sur les touches Ctrl et U du clavier pour afficher le code source de la page, et j'ai vu des lignes de code en rouge. Cela qui signifie que le code comporte des erreurs. Conseils :
- Respecter la structure d'une page html.
- Vérifier que les extensions des noms d'images sont en minuscule.
- Préférer un identifiant plutôt qu'un nom pour l'image.

Le problème vient des scripts ajoutés dans ta version en ligne (affiche le code de ta page dans le navigateur) qui modifient la valeur de ta variable i (qui chez moi vaut 64 et non 1). Cette modification est probablement cachée dans le script chargé dynamiquement par cette ligne pour les statistiques d'orange:

Code:

document.write(unescape("%3Cscript src='" + gs_p + "s.gstat.orange.fr/lib/gs.js?"+gs_r+"' type='text/javascript'%3E%3C/script%3E"));

Solution de dépannage: utiliser une autre variable que i.

Vrai solution: écrire du code comme si on était en 2019: en utilisant des gestionnaires d'événements et en contrôlant la portée des variables.
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> body { background: url('fond.png'); } #container { text-align: center; } </style> </head> <body> <div id="container"> <img name="img" src="2.png" id="page"/><br/> <img src="f1.png" id="backward"/> <img src="f2.png" id="forward"/> </div> <script type="text/javascript"> { let currentImg = 2; let page = document.getElementById('page'); document.getElementById('forward').addEventListener('click', e => { if (currentImg < 18) page.src = ++currentImg + '.png'; }); document.getElementById('backward').addEventListener('click', e => { if (currentImg > 2) page.src = --currentImg + '.png'; }); } </script> </body> </html>

03/03/2019, 22h50
bull100

super merci ;)

sinon je viens de trouver l'erreur.
J'ai ajouté : parseFloat(i)
03/03/2019, 23h46
CosmoKnacki

Citation:

Envoyé par bull100

sinon je viens de trouver l'erreur.

Laquelle?

Citation:

J'ai ajouté : parseFloat(i)

Ça ne sert à rien.

Puisque c'est numérique, Number() suffit.

J'ai néanmoins amélioré ton code.
J'ai aussi corrigé d'autres erreurs de code (JS et HTML) :

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
<body background="fond.png">
  <script>
    const num_min = 2;
    const num_max = 18;
    let num = num_min;
  </script>
  <div style="text-align:center;">
    <img id="image" src="2.png" alt="image" />
    <br/>
    <a onclick="affiche_image (num-1);"><img src="f1.png" alt="précédent" /></a>
    <a onclick="affiche_image (num+1);"><img src="f2.png" alt="suivant" /></a>
    <a href="http://bull100.pagesperso-orange.fr/marion/marion/tome1.html">sortir</a>
  </div>
  <script>
    const image = document.querySelector('#image');
 
    function affiche_image(ii) {
      num = Number(ii);
      if (num < num_min) num = num_min;
      if (num > num_max) num = num_max;
      image.src = num + ".png";
      image.alt = "image " + num;
    }
    window.onload = function() {
      affiche_image(num); // afficha la 1ere image
    }
  </script>
 
</body>

Sinon, le code de CosmoKnacki va très bien ;)