Générateur de CSS recalcitrant

Fermé
Signaler
-
 Fenril' -
Bonjour à vous toutes et à vous tous,

J'ai déjà posté quelques sujets sur ce forum et je profite de celui ci pour vous re-féliciter pour l'activité, les conaissances et l'ambiance de ces forums qui sont d'une très grande qualité, Bravo !
Je suis en train de créer un générateur de feuilles de style CSS en Javascript mais je tombe sur un problème majeur : ça ne marche pas.
J'ai pourtant crée mon unique fonction 'styles(generateur)' et tout ce qui va avec, la case supportant le code CSS obtenu etc...
Pouvez-vous m'analyser ce script et me trouver l'erreur s'il vous plait ?

<HEAD><title>Générateur CSS</title>
<script src="../javascripts/js.js" type="text/javascript"></script>
<script>

function styles(generateur)
{
var debut='<style>'+'\n';
var link='A\:link \n \{\ntext-decoration: '+document.generateur.etats_link.value+'\; \ncolor: '+document.generateur.color_link.value+'\; \nfont-family: '+document.generateur.police_link.value+'\; \nfont-size: '+document.generateur.taille_link.value+'\; \nfont-style: '+document.generateur.caract_link.value+'\; \nfont-weight: '+document.generateur.gras_link.value+'\; \n \}'+'\n';
var visited='A\:visited \n \{\ntext-decoration: '+document.generateur.etats_visited.value+'\; \ncolor: '+document.generateur.color_visited.value+'\; \nfont-family: '+document.generateur.police_visited.value+'\; \nfont-size: '+document.generateur.taille_visited.value+'\; \nfont-style: '+document.generateur.caract_visited.value+'\; \nfont-weight: '+document.generateur.gras_visited.value+'\; \n \}'+'\n';
var active='A\:active \n \{\ntext-decoration: '+document.generateur.etats_actived.value+'\; \ncolor: '+document.generateur.color_actived.value+'\; \nfont-family: '+document.generateur.police_actived.value+'\; \nfont-size: '+document.generateur.taille_actived.value+'\; \nfont-style: '+document.generateur.caract_actived.value+'\; \nfont-weight: '+document.generateur.gras_actived.value+'\; \n \}'+'\n';
var hover='A\:hover \n \{\ntext-decoration: '+document.generateur.etats_hover.value+'\; \ncolor: '+document.generateur.color_hover.value+'\; \nfont-family: '+document.generateur.police_hover.value+'\; \nfont-size: '+document.generateur.taille_hover.value+'\; \nfont-style: '+document.generateur.caract_hover.value+'\; \nfont-weight: '+document.generateur.gras_hover.value+'\; \n \}'+'\n';
var fin='</style>'+'\n';

document.generateur.resultat.value=debut+ link+ visited+ active+ hover+ fin+;
}

</script>
</HEAD>
<body>
</p>
  <table>
    <tr>
      <td width="100%"><form name="generateur">
      <div align="center">
        <center>
        <table border="1" color=#000000 cellpadding="0" cellspacing="0" width="390">
          <tr>
            <td bgcolor="#C87BFF">
              <p align="center"><font size="2" face="Verdana" color="#000000"><b>
              Générateur de CSS</b></font></p>
            </td>
          </tr>
          <tr>
            <td style="border: 1 solid #000000" bgcolor="#C87BFF">
                <div align="center">
                  <center>
                  <table border="0" cellspacing="0" width="97%">
                    <tr>
                      <td width="100%"><b><font color="#000000"><br>
                        >> Liens Actifs : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%">
                        <div align="center">
                          <table border="0" width="85%" cellspacing="3">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_link">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_link" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_link">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_link">
                                <option value="normal">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_link">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%"><b><font color="#000000">
                        >> Liens Appuyés : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15">
                        <div align="center">
                          <table border="0" cellspacing="3" width="85%">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_actived">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_actived" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_actived">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_actived">
                                <option value="none">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_actived">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%"><b><font color="#000000">
                       >> Liens Survolés : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%">
                        <div align="center">
                          <table border="0" width="85%" cellspacing="3">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_hover">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_hover" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_hover">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_hover">
                                <option value="none">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_hover">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%"><b><font color="#000000">
                        >> Liens Déjà Visités : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15">
                        <div align="center">
                          <table border="0" cellspacing="3" width="85%">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_visited">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_visited" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_visited">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_visited">
                                <option value="none">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select></td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_visited">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                  </table>
                  </center>
                </div>&nbsp;
            <p align="center"><b><input type="button" value=">> Générer la feuille de style CSS" name="generateur" onClick="styles(generateur);" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000"></font></b>
                                      <b><input type="reset" value=">> Effacer les donnés inscrites" name="reset" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000"></font></b><br><br></p>
            </td>
          </tr>
        </table>
      </div>
        <p align="left">&nbsp;</p>
      <div align="center">
        <center>
        <table border="1" color=#000000 cellpadding="0" cellspacing="0" width="390">
          <tr>
            <td bgcolor="#C87BFF">
              <p align="center"><font color="#000000"><b>
              Code généré</b></font></p>
            </td>
          </tr>
          <tr>
            <td style="border: 1 solid #000000" bgcolor="#C87BFF">&nbsp;
              <div align="center">
                <table border="0" cellpadding="2" width="97%">
                  <tr>
                    <td width="100%"> <p align="center"><font color="#C87BFF"><b>Code à insérer entre les balises <HEAD></HEAD> ou dans le fichier CSS de la page</b></font></td>
                  </tr>
                  <tr>
                    <td width="100%"> 
                    <textarea rows="15" name="resultat" cols="70" style="background-color: #FFFFFF; font-family: Verdana; font-size: 10 px; color: #000000; border: 1 solid #000000"></textarea>
                    </td>
                  </tr>
                  <tr>
                    <td width="100%">
                      <p align="center"><b><input type="button" onClick="javascript:this.form.resultat.select()" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000" value=">> Sélectionner" name="select"></font></b>
                      <p align="center"><b><input type="reset" value=">> Effacer le CSS" name="reset" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000"></font></b>
                    </td>
                  </tr>
                </table>
              </div>&nbsp;
            </td>
          </tr>
        </table>
      </div>
        </form>
    </td>
    </tr>
  <center>
  </center>
  </table>
</body>


Je vous remercie grandement à l'avance.
Cordialement, Fenril'Willem.

8 réponses

Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
916
salut,

Pouvez-vous m'analyser ce script et me trouver l'erreur s'il vous plait ?
trouver la solution, on peut toujours essayer mais définir le problème…

une description de l'erreur ou du problème rencontré ça ne ferait quand même pas de mal !
0
Messages postés
233
Date d'inscription
mardi 28 août 2007
Statut
Membre
Dernière intervention
13 janvier 2010
104
Tu utilise les noms "color_hover", "color_visited" et "color_actived", mais dans tes input tu marque : name="color_link" (pour tous)
Remplace par le bon nom dans tes input...

Autre chose : ne met pas d'espaces entre tes +, et n'en met pas à la fin, marque :
document.generateur.resultat.value=debut+link+visited+active+hover+fin;

Un conseil, sert toi du module Web Developpeur avec Firefox et de sa console d'erreur il t'affichera les propriété vides ou erronnées, il m'a fallu 5 min avec pour trouver l'erreur en l'utilisant.
0
Bonjour à vous deux,

Merci beaucoup pour vos précieuses indications qui m'ont effectivement permis de résoudre ce problème.
A Dalida, excuse-moi, j'ai oublié de préciser que le bouton ">> Générer la feuille de style CSS" fesant appel à la fonction "styles(generateur)" ne marchait pas. Mais maintenant le problème est résolu.
A Gluo, merci beaucoup de ta réponse qui m'a permis de faire marcher ce script. Je vais de ce pas télécharger le pugin Web developpeur pour m'aider dans mes futures réalisations.
Sujet Clos !

Merci encore.
Amicalement
.
0
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
916
salut,

tant que tu y es ajoute FireBug !
-;o)
0
Messages postés
7
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
17 mai 2008

Merci, je l'ajoute.
0
Messages postés
7
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
17 mai 2008

J'ai installé FireBug qui est très puissant, il va me servir, mais je n'ai malheureusement pas trouvé 'Web developpeur', le Moteur de recherche du site Addons de Firefox ne detecte rien avec ces tags : "Web" et "Developpeur"... Avez-vous un lien s'il vous plait ? Merci encore d'avance.
0
Messages postés
233
Date d'inscription
mardi 28 août 2007
Statut
Membre
Dernière intervention
13 janvier 2010
104
Voici le lien : https://addons.mozilla.org/fr/firefox/browse/type:1/cat:4/sort:popular
Tu as tous les modules favoris des développeurs web.
0
Merci beaucoup !
0