OnChange sous Firefox

Hello,

J'ai un souci avec mon code,

Code:

---

1 2 3 4 5 6 7 8 9

<form name="form1"> <table> <tr> <td><input type="text" name="color" size="10" maxlength="7" value="" onchange="tst.style.color=this.value;"></td> <td><input type="text" name="size" size="10" maxlength="7" value="" onchange="tst.style.fontSize=this.value;"></td> </tr> </table> </form> <div id="tst">test</div>

---

- 1er input : couleur du texte
- 2eme input : taille du texte

Ce code fonctionne parfaitement sous ie6 mais pas sous firefox.
Si quelqu'un a une idée :)

Merci de votre aide.

attention, n'utilise jamais la valeur d'un attribut name ou id pour désigner un élément de la page; c'est une syntaxe raccourcie utilisée uniquement par IE, depuis toujours ou presque!

la syntaxe normale est:

Code:

---

document.getElementById("tst");

---

et si ça te paraît fastidieux, fais-en une variable en fin de chargement:

Code:

---

var t=document.getElementById("tst");

---

tu pourras alors utiliser t à la place de l'expression plus haut;

Hello,
Merci pour ta réponse,
J'ai donc mis ceci :

Code:

---

1 2 3 4 5 6 7 8 9

<form name="form1"> <table> <tr> <td><input type="text" name="color" size="10" maxlength="7" value="" onchange="document.getElementById("tst").style.color=this.value;"></td> <td><input type="text" name="size" size="10" maxlength="7" value="" onchange="document.getElementById("tst").style.fontSize=this.value;"></td> </tr> </table> </form> <div id="tst">test</div>

---

Et là ca ne fonctionne ni sous IE, ni sous FF

c'est clair!
documente-toi un peu sur l'utilisation des simples ou doubles quotes, qui sont des caractères très sensibles...

Hey :)

Merci de ta correction :)

Code:

---

1 2 3 4 5 6 7 8 9

<form name="form1"> <table> <tr> <td><input type="text" name="color" size="10" maxlength="7" value="" onchange="document.getElementById('tst').style.color=this.value;"></td> <td><input type="text" name="size" size="10" maxlength="7" value="" onchange="document.getElementById('tst').style.fontSize=this.value;"></td> </tr> </table> </form> <div id="tst">test</div>

---

Donc ça refonctionne sous IE et tjs pas sur FF ^^
Je cherche encore, malgré que je viens de passer 2 heures lol.

Jsuis une quiche en js et pire que ça encore :oops:

Voilà c'est résolu,

En fait sous firefox, il mettait ma page local en cache, donc mm si je modifiais mon code, il ne le prenait pas en compte.

J'ai donc fermé puis relancé, la couleur fonctionnait mais pas la taille.
Chose corrigé en ajoutant + 'px' derrier this.value

C'est donc résolu, merci de ton aide encore une fois.

Code:

---

1 2 3 4 5 6 7 8 9

<form name="form1"> <table> <tr> <td><input type="text" name="color" size="10" maxlength="7" value="" onchange="document.getElementById('tst').style.color=this.value;"></td> <td><input type="text" name="size" size="10" maxlength="7" value="" onchange="document.getElementById('tst').style.fontSize=this.value + 'px';"></td> </tr> </table> </form> <div id="tst">test</div>

---

Salut,
c'estl 'absence du # pour la couleur et l'absence de l'unité pour la taille que FF n'aime pas. J'en ai profité pour te mettre le code cross browser

Code:

---

1 2

<td><input id="color" type="text" name="color" size="10" maxlength="7" value="" onchange="document.getElementById('tst').style.color='#'+document.getElementById('color').value;"></td> <td><input id="size" type="text" name="size" size="10" maxlength="7" value="" onchange="document.getElementById('tst').style.fontSize=document.getElementById('size').value+'pt';"></td>

---

Yes merci.

En fait c'est con car FF prend bien les valeur "red" par exemple mais pas les couleurs sans le # ^^