Discussion :

[Tibalpa]

Bonjour,

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

Code :

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

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 :

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

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 :

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

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 :

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

1
2
3
<div id='debuttext'> blablabla
blablabla
blablabla</div>

et

Code :

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

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

[SpaceFrog]

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

[Tibalpa]

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

Code :

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

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 :

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

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

à la place de :

Code :

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

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.

[bigboomshakala]

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

Code :

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

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

à la place de :

Code :

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

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

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

Code :

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

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

[Tibalpa]

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