Petite fonction toute simple, mais

**renaud26** · 20/07/2006, 13h39

Bonjour à tous,

Je débute en JS.
Je voudrais afficher un mot qui serait modifié selon des attributs choisis dans un formulaire. Alors j'ai fait une petite fonction...qui ne fonctionne pas...

Code :

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

1
2
3
4
5
6
7
8
 
 
function affiche_mot(){
 
if (document.form1.gras.checked==true)
{ 
document.write("<B>" + document.form1.mot.value + "</B>");
}

puis dans le form1:

Code :

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

1
2
3
 
<input type="hidden" name="mot" value="Le Mot">
 <input name="gras" type="checkbox"  onClick="affiche_mot();">

et j'affiche la fonction à l'endroit où je voudrais voir Le Mot

Code :

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

1
2
3
 
<script language="JavaScript" type="text/JavaScript">
affiche_mot()</script>

Si je coche la case, cela m'affiche bien le mot en gras, mais plus rien d'autre dans la fenêtre ! une page blanche et le mot tout seul

**SpaceFrog** · 20/07/2006, 13h48

normal document.write efface le reste du doc ...

mets un div et attribue lui le innerHTML

**renaud26** · 20/07/2006, 14h00

Merci pour ta réponse, mais en cherchant, j'ai lu que innerHTML ne fonctionnait que sous IE. Qu'en penses tu ?

**SpaceFrog** · 20/07/2006, 14h06

que je sais pas ou t'as lu ça mais ne retourne jamais sur ce site ... c'est un ramassis de conneries ...

**renaud26** · 20/07/2006, 14h18

oups ! alors je ne dirai pas lequel

Bon voici ce que j'ai fait

Code :

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

1
2
3
4
5
6
7
8
 
 
function affiche_mot(){
if (document.form1.gras.checked==true)
{ 
document.all.affiche.innerText = "<b>" + document.form1.mot.value + "</b>"; 
}
}

Donc le mot s'affiche bien dans mon div "affiche", mais il ne se met pas en gras, il affiche les balises !
Par ailleurs, si je peux me permettre, ma question n'était pas complète. J'ai prix l'exemple de l'attribut gras, mais en réalité j'ai 5 checkbox et 5 attributs (italique, souligné, couleur...)...
Comment tu articulerais la fonction pour que les effets s'appliquent sur le mot en se cumulant, ou s'annulent si le checkbox est décoché ?
Je me vois pas trop mettre autant de else if que de combinaisons...

**linar009** · 20/07/2006, 14h37

Ben je sais pas ce que vous en pensez mais pour moi innerHTML fonctionne sur tous les navigateurs (à part peut-être internet explorer version 0.2beta

)

Donc voici mon conseil :

document.all.affiche.innerHTML = "<b>" + document.form1.mot.value + "</b>";

**linar009** · 20/07/2006, 14h41

Au fait pour le cumul des attributs, mets ta chaine dans une variable :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var str = document.form1.mot.value ;
 
if (document.form1.gras.checked==true)
str = "<b>" + str + "</b>"; 
if (document.form1.italique.checked==true)
str = "<i>" + str + "</i> ";
if (document.form1.machin.checked==true)
str = "<Machin>" + str + "</Machin> ";
 
 
document.all.affiche.innerHTML = str;

**renaud26** · 20/07/2006, 14h44

Oups !!! nos posts se sont croisés ! je regarde ta soluce

Euh, oui Linar009, mais j'ai lu ça tout à l'heure sur un forum très connu et très sérieux...si si...
Ensuite, merci, c'est bien innerHTML...
Par contre, tu vois comment je pourrais cumuler facilement les attributs, ou il faut faire un else if par combinaison possible ?

**SpaceFrog** · 20/07/2006, 14h45

switch is a magic word

**linar009** · 20/07/2006, 14h52

Envoyé par SpaceFrog

switch is a magic word

Avec plusieurs variables, ça risque d'être compliqué je pense ...

Code :

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

1
2
3
4
str = (document.form1.gras.checked ? <B> + str + </B> :
     document.form1.italique.checked ? <I> + str + </I> :
     document.form1.italique.checked ? <M> + str + </M> :
str);

Mais je ne suis pas sûr que cela cumule (essaie...)

**linar009** · 20/07/2006, 14h54

Envoyé par renaud26

Euh, oui Linar009, mais j'ai lu ça tout à l'heure sur un forum très connu et très sérieux...si si...

Ben écoute moi innerHTML, ça fonctionne sur IE, FF, Netscape ...

**SpaceFrog** · 20/07/2006, 14h55

avec plusieurs variables aucun problème suffit de fair eun switch (true) ...

**linar009** · 20/07/2006, 14h57

Envoyé par SpaceFrog

avec plusieurs variables aucun problème suffit de fair eun switch (true) ...

Je ne suis pas sûr que cela ait un avantage significatif par rapport à if, else if , else ...
Enfin , je me trompe peut-être ...

**FremyCompany** · 20/07/2006, 15h05

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var att=new Array()
if (document.getElementById("bold").checked) {
  att[att.lenght]="b"
}
if (document.getElementById("italic").checked) {
  att[att.lenght]="i"
}
if (document.getElementById("underline").checked) {
  att[att.lenght]="u"
}
if (document.getElementById("greater").checked) {
  att[att.lenght]="big"
}
if (document.getElementById("smaller").checked) {
  att[att.lenght]="small"
}
var str = ""
for (var i=0; i<att.length; i++) {
   str += "<" + att[i] + ">"
}
str += InnerHTML
for (var i=att.length; i>-1; i--) {
   str += "</" + att[i].split(" ")[0] + ">"
}

**renaud26** · 20/07/2006, 15h15

Merci, Fremy...je ne voudrais pas copier-coller ton code comme un benêt, et j'essaye de comprendre...pourquoi j'ai une erreur "innerHTML est indéfini"...

**SpaceFrog** · 20/07/2006, 15h26

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var att=new Array()
switch (true){
case document.getElementById("bold").checked :  att.push("b");
case document.getElementById("italic").checked:   att.push("i");
case document.getElementById("underline").checked: att.push("u")
case document.getElementById("greater").checked:  att.push("big")
case document.getElementById("smaller").checked: att.push("small")
}
var str = ""
for (var i=0; i<att.length; i++) {
   str += "<" + att[i] + ">"
}
str += letexte
for (var i=att.length; i>-1; i--) {
   str += "</" + att[i] + ">"
}

**FremyCompany** · 20/07/2006, 15h51

Update et commentaires du code du post au dessus, dsl de "voler" ton code

L'idée du switch est tout bonnement... bonne ! Mais attention de ne pas oublier le break !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var att=new Array() // Ensemble des balises à utiliser
// Ajoute une balise et ses attributs au tableau
switch (true){
case document.getElementById("bold").checked :  att.push("b"); break;
case document.getElementById("italic").checked:   att.push("i"); break;
case document.getElementById("underline").checked: att.push("u"); break;
case document.getElementById("greater").checked:  att.push("big"); break;
case document.getElementById("smaller").checked: att.push("small"); break;
case document.getElementById("fixefont").checked: att.push("font face='Courier New'"); break;
}
// Construit le HTML à utiliser
var str = ""
// Balises ouvrantes
for (var i=0; i<att.length; i++) {
   str += "<" + att[i] + ">"
}
// Texte central
   // Conversion du texte au format HTML
   var Div = document.createElement("DIV");
   Div.appendChild(document.createTextNode(METS_ICI_UNE_REFERENCE_AU_TEXTE));
str += Div.innerHTML;
// Balises fermantes
for (var i=att.length; i>-1; i--) {
   str += "</" + att[i].split(" ")[0] + ">"
}
// str vaut maintenant le HTML final

**SpaceFrog** · 20/07/2006, 16h00

non justement fremy pas de break sinon il ne passe pas en revue toutes les options ...

si tu fais un break il sort du switch, si tu ne mets pas de break il continue ...

**FremyCompany** · 20/07/2006, 16h02

Hein ?
J'en suis pas sur mais soit...
Avec ta méthode, il ne risque pas d'ajouter tous les attributs dans le cas ou le premier est true ??

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<script type="text/javascript">
var i=0
switch (true) {
   case true: document.write("true<br />");
   case false: document.write("false<br />");
}
</script>
</body>
</html>