Changement de police par select

Bonjour,

J'arrive à proposer une sélection globale de police de caractère grâce à :

Code:

---

1 2 3 4 5 6

<select name="police" onchange="document.body.style.fontFamily=this.value;"> <option value="">----</option> <option value="Arial">Arial</option> <option value="Courrier">Courrier</option> <option value="Tahoma">Tahoma</option> </select>

---

Cela vient bien prendre le pas sur le paramétrage de ma feuille de style.



Par contre, quand je veux appliquer cela uniquement à certains éléments du texte

Code:

---

1 2 3 4 5 6

<select name="police2" onchange="document.getElementById(\"debuttext\").style.fontFamily=this.value;"> <option value="">----</option> <option value="Arial">Arial</option> <option value="Courrier">Courrier</option> <option value="Tahoma">Tahoma</option> </select>

---

ou

Code:

---

1 2 3 4 5 6

<select name="police3" onchange="document.getElementByClass(\"anglais\").style.fontFamily=this.value;"> <option value="">----</option> <option value="Arial">Arial</option> <option value="Courrier">Courrier</option> <option value="Tahoma">Tahoma</option> </select>

---

cela ne fonctionne pas.


Dans le HTML, on trouve des choses comme :

Code:

---

1 2 3

<div id='debuttext'> blablabla blablabla blablabla</div>

---

et

Code:

---

1 2 3

<div class='anglais'> do yo speak english ? </div> <div class='français'> parlez-vous anglais ? </div> <div class='anglais'> blablabla </div>

---

Merci de vos retours

onchange => modification + perte de focus, autrement dit si le select conserve le focus le onchange ne se declenche pas ...

Je ne pense pas que mon dysfonctionnement de là car si je mets à la place :

Code:

---

1 2	onchange="alert('Index: ' + this.selectedIndex + '\nValeur: ' + this.options[this.selectedIndex].value)">

---

Cela fonctionne impeccable et this.options[this.selectedIndex].value contient bien le libellé de la police choisie




J'ai finalement trouvé. Si j'écris :

Code:

---

1 2	<select name='police2' onchange='document.getElementById("debuttext").style.fontFamily=this.value'>

---

à la place de :

Code:

---

1 2	<select name="police2" onchange="document.getElementById(\"debuttext\").style.fontFamily=this.value">

---

cela fonctionne très bien


Si quelqu'un peut m'expliquer la subtilité... Apparemment les guillemets c'est pas pareil qu'en php.

Citation:

---

Envoyé par Tibalpa

J'ai finalement trouvé. Si j'écris :

Code:

---

1 2	<select name='police2' onchange='document.getElementById("debuttext").style.fontFamily=this.value'>

---

à la place de :

Code:

---

1 2	<select name="police2" onchange="document.getElementById(\"debuttext\").style.fontFamily=this.value">

---

cela fonctionne très bien


Si quelqu'un peut m'expliquer la subtilité... Apparemment les guillemets c'est pas pareil qu'en php.

---

ah bah oui :D

quand on a un événement géré dans une balise c'est sous cette forme

Code:

---

onXXX = "..." ou onXXX = '...'

---

jusque là on est d'accord
et quand on a besoin d'utiliser une chaîne dans cette gestion d'événement, on place cette chaîne entre simple quote si le code est entre double-quote, ou entre double-quote si le code est entre de simple quote...

là ce que tu avais fait, ce n'est pas une chaine de caractère \"debuttext\" contenant le texte debuttext, mais c'est écrire le caractère double quote (c'est bien LE caractère " puisqu'il est échappé) suivant d'un <truc> debuttext et suivi d'un autre caractère "
:br: erreur de syntaxe en somme pour le navigateur qui ne peux pas s'y retrouver. il essaie d'interpréter l'argument de getElementById comme une chaîne, mais ce n'est pas possible.

on écrit \" uniquement pour afficher le caractère " dans un texte, on écrit " pour débuter une chaîne de caractère javascript

Merci beaucoup pour ces explications. Maintenant je comprends mieux...