Complètement perdu dans JavaScript

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'essaie de changer une balise pour y insérer un script.
Je ne suis pas sûr d'employer les bons termes, désolé.

J'ai le code suivant qui fait que la phrase "bonjour, etc" s'affiche dans la langue que le visiteur choisi. Mais je n'arrive pas à inclure mes liens hypertextes.

Comment faire ?
J'ai joint une impression d'écran.

Merci d'avance.
Code:

1 2 3 4 5 6 7 <div id="langText"></div> <script> if ($j('li.main.right.language_selector a.tab').text().trim() == "Français") { document.getElementById("langText").innerHTML = "<center><h2>FOIRE AUX QUESTIONS</h2></center><br><justify>Bonjour, <br><br>Nous vous invitons à chercher dans nos <b><i>forums</i></b> avant de nous envoyer une requête...</justify>" ; }
Code:

1 2 3 4 5 6 7 <td> <h5> <a href="http://monsite.com/categories/20071751"> <img src="/attachments/token/ppx0yvmtfqwk13n/?name=fr.png" alt="fr.png"</> Foire Aux Questions </a> </h5> </td>

17/06/2013, 13h42
SylvainPV

Bonjour Sylvain,

Ton script se contente d'insérer un HTML différent selon la valeur d'un onglet plus haut. Donc pour ajouter des liens hypertextes, il suffit de mettre des balises <a> dans le code HTML inséré via innerHTML.

Il existe des manières bien plus "propres" de faire cela, avec des mécanismes de templating Javascript ou de data-binding, mais si tu débutes en Javascript mieux vaut commencer par les bases :ccool:

Ça ne marche pas

Merci Sylvain,

Je ne sais pas quoi faire.
J'ai beau essayer avec ou sans guillemets...

Saurais-tu me dire, s'il te plaît ?

MERCI

Code:

1
2
3
4
5
6
7
8
9
10
 
<div id="langText"></div>
 
 
<script>
if ($j('li.main.right.language_selector a.tab').text().trim() == "Français") {
 
document.getElementById("langText").innerHTML = "<center><h2>FOIRE AUX QUESTIONS</h2></center><br><justify>Bonjour, <br><br>Nous vous invitons à chercher dans nos <b><i>forums</i></b> avant de nous envoyer une requête...</justify>" ;
"<a href="http://monsite.com/categories/20071751"><img src="/attachments/token/ppx0yvmtfqwk13n/?name=fr.png" alt="fr.png"</> Foire Aux Questions</a>"
}

17/06/2013, 14h29
Tendhor57

Salut,

Code:

<a href="http://monsite.com/categories/20071751"><img src="/attachments/token/ppx0yvmtfqwk13n/?name=fr.png" alt="fr.png"</> Foire Aux Questions</a>

Normal que cela ne marche pas, essai cela, ca devrais aller mieux

Code:

<a href='http://monsite.com/categories/20071751'><img src='/attachments/token/ppx0yvmtfqwk13n/?name=fr.png' alt='fr.png'</> Foire Aux Questions</a>

J'ai simplement remplacé tes doubles quotes " par de simple quote ', il s'agit d'une erreur d'interprétation lorsque l'on souhaite mettre des " à l'intérieur de ", il faut soit faire un échappement \" soit remplacé tes " qui sont à l'intérieur par des simples quotes

Merci !!

Je vais peut-être être lourd, mais qu'est-ce que je fais de la première partie ?
Code:

1 2 "<center><h2>FOIRE AUX QUESTIONS</h2></center><br><justify>Bonjour, <br><br>Nous vous invitons à chercher dans nos <b><i>forums</i></b> avant de nous envoyer une requête...</justify>' ;

Bonjour,
pourquoi ne pas masquer/afficher des div en fonction de la langue ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="langText">
	<div class="langText" id="langText-FR">
		<h2 style="text-align:center;">FOIRE AUX QUESTIONS</h2>
		<p style="text-align:justify;">Bonjour, <br/><br/>Nous vous invitons à chercher dans nos <b><i>forums</i></b> avant de nous envoyer une requête...</p>
		<p><a href="http://monsite.com/categories/20071751"><img src="/attachments/token/ppx0yvmtfqwk13n/?name=fr.png" alt="fr.png" /> Foire Aux Questions</a></p>
	</div>
 
	<div class="langText" id="langText-EN">
		...
	</div>
 
	<div class="langText" id="langText-JA">
		...
	</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
<script>
$('.langText').hide(); // on masque tout
if ($j('li.main.right.language_selector a.tab').text().trim() == 'Français') {
	$('#langText-FR').show();
} else if(.... == 'Anglais') {
	$('#langText-EN').show();
}
...
</script>

Ca évite d'écrire (inutilement) du code HTML à l'intérieur du code JavaScript, et de se mélanger les pieds avec les ' et ".

N.B. Je suppose que $j(...) fait référence à jQuery.

17/06/2013, 14h56
Vainvainsp

2 pièce(s) jointe(s)
De nouveau merci à tous de votre aide !
Mais là je suis encore plus perdu.

Ce que je voudrais comme résultat je l'ai ajouté en pièces jointes.

Selon la langue que le visiteur choisit je voudrais que mon "widget" change de langue aussi et qu'il y ait dans le widget:
- - Le message d'accueil,
- - Le drapeau
- - Le lien hypertexte à la Foire Aux Questions correspondante.
Encore Merci !

Re.
Commence par dire que tu n'y connais rien à JavaScript, on gagnerait du temps. (il n'y a pas de honte à ça)
Car on vient de te donner DEUX solutions, mais si tu ne comprends pas, il te sera en effet difficile d'appliquer les méthodes proposées...

Pour faire simple, oublie mon précédent post et utilise celui-ci :
Code:

1 2 3 4 5 6 7 8 9 10 <div id="langText"></div> <script> // Si "Français" : if ($j('li.main.right.language_selector a.tab').text().trim() == 'Français') { var text_lg = '<h2 style="text-align:center;">FOIRE AUX QUESTIONS</h2>'; text_lg += '<p style="text-align:justify;">Bonjour, <br><br>Nous vous invitons à chercher dans nos <b><i>forums</i></b> avant de nous envoyer une requête...</p>'; text_lg += '<p><a href="http://monsite.com/categories/20071751"><img src="/attachments/token/ppx0yvmtfqwk13n/?name=fr.png" alt="fr.png" /> Foire Aux Questions</a></p>'; document.getElementById("langText").innerHTML = text_lg; } </script>
Tu remarqueras que j'ai enlevé les balises OBSOLETES <justify> et <center> pour les remplacer par du style CSS (ici, inline)

jreaux62 à raison tu créer des div qui contienne chacune ton texte, tes liens ,.... et en fonction du choix de langue tu fait apparaitre telle ou telle div, exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<ul id="choixlangue">
    <li onClick="choixlangue(fr);">FR</li>
    <li  onClick="choixlangue(eng);">ENG</li>
</ul>
 
//menu français
<div id="francais">
           <div id="titre">Bonjour</div>
                <div id="text">ceci est mon blabla en français</div>
                <a href="ceci est mon lien vers une page française">cliquez pour etre français</a>
</div>
 
//menu anglais
<div id="anglais">
           <div id="titre">Good morning</div>
                <div id="text">this is my blablabla</div>
                <a href="this is link english">clic if you are english</a>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function choixlangue(lang){
if(lang==fr){
document.getElementById('francais').visibility="visible";
document.getElementById('anglais').visibility="hidden";
}
if(lang==eng){
document.getElementById('anglais').visibility="visible";
document.getElementById('francais').visibility="hidden";
}
[...]
}

Il te sera cependant nécessaire d'approfondir tes bases en javascript si tu veut dynamiser tout cela

17/06/2013, 15h23
Bovino

:nono:

Il ne faut pas utiliser visibility pour afficher ou masquer des éléments !
Cette propriété conserve l'emplacement de l'élément ce qui crée des zones vides.
Pour masquer un élément, c'est display qu'il faut utiliser.
17/06/2013, 15h42
Tendhor57

oui c'est vrai désolé :oops:, enfin l'idée était là comme piste pour l'aider, sinon Vainvainsp tu peut sinon faire ta méthode avec innerhtml, mais cela risque d'être un peu plus lourd à écrire dans ton javascript.

C'est toi qui voit
18/06/2013, 12h20
Vainvainsp

Effectivement, j'y connais rien et je pensais que c'était plus simple que ça d'ajouter un lien après le texte... Désolé !

Mais ton code @jreaux62 fonctionne trop bien, c'est ce que je cherchais !!!

ENCORE MERCI !!!!!
18/06/2013, 12h27
Invité

Bonjour,
c'est effectivement très simple.

Sauf qu'il faut connaitre un minimum le langage, et qu'il existe aussi plusieurs méthodes pour arriver au même résultat.
21/06/2013, 22h54
Vainvainsp

Jreaux62,

Qu'est-ce que tu me conseillerais pour approfondir mes connaissances ?
J'aimerais pouvoir apprendre plus.

Merci !