JAVASCRIPT: Non compatible Chrome

JSneophyte Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Bonjour,

Je suis grand, immense, indétronable débutant en Javascript.
J'ai un script simple qui fonctionne sous IE et Firefox mais Chrome ne veut rien savoir.
JavaScript est bien activé dans Chrome.
Je pense que je ne respecte pas un certain niveau syntaxique...
HELP ? Merci d'avance.

Script visible : http://www.wokus.fr/ocretest.php

<ital><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function changetest(img) {
if (img.src=='http://www.wokus.fr/_images20/icones/ok.png') { img.src = '_images20/icones/nok.png'; }
else { img.src = '_images20/icones/ok.png'; }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<font color="#FFFFFF" size="4" face="Verdana, Arial, Helvetica, sans-serif"><span style="cursor: pointer;"><img id='essai' src="_images20/icones/ok.png" width="32" height="32" border="0" onclick="changetest(essai);"/></span></font>
</body>
</html></ital>

MERCI d'avance.

2 réponses

Réponse 1 / 2
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   1 011
 
Bonjour,

À vrai dire, je suis plutôt surpris que IE et FF acceptent ton script :)
Dans la définition de ton image, tu mets :
<img id='essai' src="_images20/icones/ok.png" width="32" height="32" border="0" onclick="changetest(essai);" />

Le fait que l'id de ton image soit « essai » ne la définit pas pour autant comme une variable javascript du nom de « essai ». Donc ton changetest(essai) ne devrait pas pouvoir marcher.

À la place, deux solutions :
soit utiliser document.getElementById("essai"), qui pointe vers ton image ;
soit, plus simple, mais ne fonctionnant que parce que le onclick est défini dans la balise <img>, utiliser le mot-clef « this » :
changetest(this)

Du coup, ton <body> devient (le reste ne change pas) : 
<body> 
    <font color="#FFFFFF" size="4" face="Verdana, Arial, Helvetica, sans-serif"> 
        <span style="cursor: pointer;"> 
            <img id='essai' src="_images20/icones/ok.png" width="32" height="32" border="0" onclick="changetest(this);"/> 
        </span> 
    </font> 
</body>


Xavier

(PS : ton empilement de <font><span><img> est tout-à-fait inutile, tu peux mettre tout ça sur la seule balise <img>. Ça devient alors : 
<body> 
    <img style="cursor: pointer; color:white; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:4pt" id='essai' src="_images20/icones/ok.png" width="32" height="32" border="0" onclick="changetest(this);"/> 
</body>
1
JSneophyte Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Oh yes, ça marche ^^
Merci beaucoup.
0
Réponse 2 / 2
JSneophyte Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Ca marche niquel !

Je complexifie le sujet et donc j'ai testé avec document.GetElementbyID.
La encore je dois être faux en syntaxe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function changetest(img, img2) {
imgid2=document.getElementById(img2);
if (img.src=='http://www.wokus.fr/_images20/icones/ok.png') {
img.src = '_images20/icones/nok.png';
imgid2.src = '_images20/icones/nok.png';
}
else {
img.src = '_images20/icones/ok.png';
imgid2.src = '_images20/icones/ok.png';
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<img style="cursor: pointer;" id='essai1' src="_images20/icones/ok.png" width="32" height="32" border="0" onclick="changetest(this, img2);"/>
<br />
<img style="cursor: pointer;" id='essai2' src="_images20/icones/ok.png" width="32" height="32" border="0" onclick="changetest(img, this);"/>
</body>
</html>
0
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   1 011
 
En effet, ça ne peut pas marcher.
Je vais essayer d'expliquer.
Ta fonction changetest(img, img2) attend comme paramètres :
- img qui est un objet de type image (balise <img>). Tu l'utilises bien comme ça, puisque tu mets img.src=...
- img2 qui est un objet de type chaîne de caractère. Tu l'utilises dans la fonction document.getElementById(img2), donc c'est une chaîne de caractère qui doit être égale à l'id d'une image.

Or, dans tes appels à cette fonction, tu mets :
changetest(this, img2)
- this est OK : c'est l'objet <img> courant.
- img2 n'est, par contre, pas une chaîne de caractères. C'est une variable javascript indéfinie. Pour en faire une chaîne de caractères, il faut utiliser des guillemets : "img2" ou 'img2'

changetest(img, this)
- img n'est ni une chaîne de caractères, ni un objet de type image défini. C'est la même erreur que dans ton message d'origine.
- this est un objet de type image, alors que pour le deuxième argument de la fonction, on attend une chaîne de caractères.

Par ailleurs, tu mets comme id essai1 et essai2, alors que dans tes onclicks, tu mets du img et img2...

Je peux te proposer deux solutions.
1 - 
function changetest(img1, img2)
{
    imgid1=document.getElementById(img1); 
    imgid2=document.getElementById(img2);

    if (imgid1.src == 'http://www.wokus.fr/_images20/icones/ok.png')
    {
        imgid1.src = '_images20/icones/nok.png';
        imgid2.src = '_images20/icones/nok.png';
    }
    else
    {
        imgid1.src = '_images20/icones/ok.png';
        imgid2.src = '_images20/icones/ok.png';
    }
} 

Pour les deux images :
onclick="changetest('essai1', 'essai2')"


2 - 
function changetest(img1, img2)
{
    if (imgid1.src == 'http://www.wokus.fr/_images20/icones/ok.png')
    {
        imgid1.src = '_images20/icones/nok.png';
        imgid2.src = '_images20/icones/nok.png';
    }
    else
    {
        imgid1.src = '_images20/icones/ok.png';
        imgid2.src = '_images20/icones/ok.png';
    }
} 
......
onclick="changetest(this, document.getElementById('essai2'))"
onclick="changetest(document.getElementById('essai1'), this)"


Xavier
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse