Affichage d'un petit code en javascript

**bull100** · 03/03/2019, 20h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**eleydet** · 03/03/2019, 21h06

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.

**CosmoKnacki** · 03/03/2019, 22h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**bull100** · 03/03/2019, 22h50

super merci

sinon je viens de trouver l'erreur.
J'ai ajouté : parseFloat(i)

**CosmoKnacki** · 03/03/2019, 23h46

Envoyé par bull100

sinon je viens de trouver l'erreur.

Laquelle?

J'ai ajouté : parseFloat(i)

Ça ne sert à rien.

Invité · 04/03/2019, 15h52

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Affichage d'un petit code en javascript

JavaScript

Discussions similaires

Partager

Partager