Probleme de Javascript sur firefox mais marche sur IE 6

28 février 2009 à 19:01:14

Bonjour
J ai un souci avec un script que j ai trouvé ,il fonctionne sur IE et pas sur FIREFOX.
Je debute vraiment ,et si vous voyez une raison pour que ce code marche sur IE et pas sur FIREFOX je suis preneur, ou is vous avez un script qui marche sur les 2 et qui fait la meme chose (cad faire defiler des images quand on appuis sur un bouton) je suis preneur aussi. merci d avance pour votre aide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Bienvenue sur le site de l'USMA</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <link rel="stylesheet" type="text/css" href="../design.css">
<SCRIPT LANGUAGE="JavaScript">

function changeImage()

{

  mainimage.src = list.options[list.selectedIndex].value;

}

function prevImage()

{

        if(list.selectedIndex == 0)

        {

                list.selectedIndex = list.options.length-1;

        }

        else

        {

                list.selectedIndex--;

        }

        changeImage();

}

function nextImage()

{

        if(list.selectedIndex == list.options.length-1)

        {

                list.selectedIndex = 0;

        }

        else

        {

                list.selectedIndex++;

        }

        changeImage();

}

</script>

        </head>
        <body  onLoad="javascript:changeImage()"bgcolor="black">
                

                        <div align="center">

<img name="mainimage" border="1">

<br>

<input type="button" value="Back" onclick="javascript:prevImage()">



        <select id="list" onchange="javascript:changeImage()">

                <option value="1.jpg">Premiere Image</option>

                <option value="2.jpg">Deuxieme Image</option>

                <option value="3.jpg">Troisieme Image</option>

                <option value="4.jpg">Quatrieme Image</option>

        </select>



<input type="button" value="Next" onclick="javascript:nextImage()">

</div>


           </body>
</html>

Golmote

28 février 2009 à 19:28:15

Utilise les balises <code> pour faciliter la lisibilité. Et indente aussi ton code, pour la même raison.

restimel

28 février 2009 à 19:43:44

Bonjour,
Tout d'abord, il serait préférable que tu affiches les codes javascript et html grâce aux balises code disponible sur ce site. Ça nous permet de mieux visualiser ton script avec la coloration syntaxique. grilled by Golmote (cependant précise le language pour qu'on ait la coloration synaxique)

En ayant regardé rapidement je pense que tu dois avoir un problème avec les définitions d'élément (en fait je suis même étonné que ça marche avec IE)
par exemple pour ta première fonction écrit plutôt comme ceci:

function changeImage()
{
 var list=document.getElementById('list'); //ceci permet de récupérer l'élément qui a pour ID 'list'
 var mainimage=document.getElementsByName('mainimage')[0]; //ceci permet de récupérer le premier élément qui a pour nom 'mainimage'
 mainimage.src = list.options[list.selectedIndex].value;
}

'mainimage' et 'list' sont maintenant des variables qui pointent vers les éléments en question. Donc tu peux utiliser ces variables dans la fonction où elles sont définies

Il faudra sans doute que tu fasses cette modification pour les autres fonctions

D'ailleur, en relisant je pense que

mainimage.src = list.value;

est meilleure que list.options[list.selectedIndex].value;

eastman

1 mars 2009 à 19:22:33

Merci pour ta réponse effectivement j ai rajouté les lignes

var list=document.getElementById('list'); //ceci permet de récupérer l'élément qui a pour ID 'list'
 var mainimage=document.getElementsByName('mainimage')[0]; //ceci permet de récupérer le premier élément qui a pour nom 'mainimage'

La première image s'affiche mais les boutons qui normalement doivent faire défiler les images ne font rien.
Y a t il d'autre lignes à modifier ?
Car je n'ai aucune connaissance en Javascript.
Merci pour ton aide.