Petite fonction toute simple, mais

Version imprimable

Voir 40 message(s) de cette discussion en une page

20/07/2006, 13h39
renaud26

Petite fonction toute simple, mais
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:

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:

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:

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 :oops:
20/07/2006, 13h48
SpaceFrog

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

mets un div et attribue lui le innerHTML
20/07/2006, 14h00
renaud26

Merci pour ta réponse, mais en cherchant, j'ai lu que innerHTML ne fonctionnait que sous IE. Qu'en penses tu ?
20/07/2006, 14h06
SpaceFrog

que je sais pas ou t'as lu ça mais ne retourne jamais sur ce site ... c'est un ramassis de conneries ...
20/07/2006, 14h18
renaud26
oups ! alors je ne dirai pas lequel ;)

Bon voici ce que j'ai fait
Code:

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...
20/07/2006, 14h37
linar009

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 :mouarf: )

Donc voici mon conseil :

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

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

Code:

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;

20/07/2006, 14h44
renaud26

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 ?
20/07/2006, 14h45
SpaceFrog

switch is a magic word ;)
20/07/2006, 14h52
linar009
Citation:

Envoyé par SpaceFrog

switch is a magic word ;)

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

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...)
20/07/2006, 14h54
linar009

Citation:

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 ...
20/07/2006, 14h55
SpaceFrog

avec plusieurs variables aucun problème suffit de fair eun switch (true) ... :roll:
20/07/2006, 14h57
linar009

Citation:

Envoyé par SpaceFrog

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

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

Code:

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] + ">"
}

20/07/2006, 15h15
renaud26

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"...

Code:

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] + ">"
}

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:

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

20/07/2006, 16h00
SpaceFrog

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 ...

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:

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>

20/07/2006, 16h03
renaud26

Tu as raison Fremmy, les attributs sont comme "cumulés" d'entrée. C'est à dire que si je check "gras", j'affiche gras, italique et souligné...

Voir 40 message(s) de cette discussion en une page