0

Mes navigateurs IE et Chrome n'affichent pas correctement les phrases françaises lorsque je passe d'une expression française (fonction onload) à une expression anglaise (fonction onmousedown) et à une expression française (fonction onmouseup). Quand je relâche sur la souris d'une phrase particulière, il retourne en français mais les caractères spéciaux pour ô et é (qui sont ô et é) ne changent pas du code numérique au ô et é. Quelqu'un peut-il me dire pourquoi il fait cela et comment je peux le réparer?Les caractères spéciaux en JavaScript ne s'affichent pas correctement sur le site Web

Voici mon code JavaScript:

/* 
    Function List: 
    eventSource(e) 
     Returns the source of an event in either event model 

    swapFE(phrase, pnum) 
     Changes a French phrase to the English version of that phrase. 

    swapEF(phrase, pnum) 
     Changes an English phrase ot the Frech version of that phrase. 

    setUpTranslation() 
     Insert the current week's french phrases into document and set up 
     event handlers for the phrases. 
*/ 

//Returns the source of an event in either event model 
function eventSource(e) { 
    var IE = document.attachEvent ? true:false; 
    var DOM = document.addEventListener ? true: false; 
    if (IE) return event.srcElement; 
    else if (DOM) return e.currentTarget; 
} 
//I added the function below to try and make it cross-browser compatible but it did not work....help! 
//function applysetUpTranslation(phrases[i],"click",swapFE(e),false) { 
//if (IE) phrases[i].attachEvent("on"+onmousedown, swapFE(e)); 
//else if (DOM) phrases[i].addEventListener(click,swapFE(e),true); 
//} 


function setUpTranslation() { 
    var IE = document.attachEvent ? true:false; 
    var DOM = document.addEventListener ? true: false; 
    var phrasesContainer = document.getElementById("phrases"); 
    var phrases= phrasesContainer.getElementsByTagName("p"); 

    for (i = 0; i<phrases.length; i++) { 
     phrases[i].number = i; 
     phrases[i].childNodes[1].innerHTML = french[i]; 
     phrases[i].childNodes[1].id = i; 

//childNodes[1] is the second span in the <p> array 
    if (IE) { 
     phrases[i].childNodes[1].onmousedown = function() { swapFE(event); }; 
    } else { 
     phrases[i].childNodes[1].onmousedown = swapFE; 
    } 

    if (IE) { 
     phrases[i].childNodes[1].onmouseup = function() { swapEF(event); }; 
    } else { 
     phrases[i].childNodes[1].onmouseup = swapEF; 
    } 

    } 

} 

//this function changes the French phrase to an English phrase. 
function swapFE(e) { 
     var phrase = eventSource(e); 
     //phrase.innerText = english[phrase.id]; 
     var parent = phrase.parentNode; 
     //childNodes[0] is the number of the phrase +1 
     var idnum = parent.childNodes[0]; 
     //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 
     var phrasenum = parseInt(idnum.innerHTML)-1; 
     phrase.innerText = english[phrasenum]; 
     parent.childNodes[1].style.fontStyle= "normal"; 
     parent.childNodes[1].style.color = "rgb(155, 102, 102)"; 
    } 


function swapEF(e) { 
     var phrase = eventSource(e); 
     //var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
     var parent = phrase.parentNode; 
     var idnum = parent.childNodes[0]; 
     var phrasenum = parseInt(idnum.innerHTML)-1; 
     phrase.innerText = french[phrasenum]; 
     parent.childNodes[1].style.fontStyle= "italic"; 
     parent.childNodes[1].style.color= "black"; 
} 

Voici le code js avec le tableau français en elle:

var english=new Array(); 
english[0]="This hotel isn't far from the Eiffel Tower."; 
english[1]="What time does the train arrive?"; 
english[2]="We have been waiting for the bus for one half-hour."; 
english[3]="This meal is delicious"; 
english[4]="What day is she going to arrive?"; 
english[5]="We have eleven minutes before the train leaves!"; 
english[6]="Living in a foreign country is a good experience."; 
english[7]="Excuse me! I'm late!"; 
english[8]="Is this taxi free?"; 
english[9]="Be careful when you go down the steps."; 

var french=new Array(); 
french[0]="Cet h&#244;tel n'est pas loin de la Tour Eiffel."; 
french[1]="A quelle heure arrive le train?"; 
french[2]="Nous attendons l'autobus depuis une demi-heure."; 
french[3]="Ce repas est d&#233;licieux"; 
french[4]="Quel jour va-t-elle arriver?"; 
french[5]="Nous avons onze minutes avant le d&#233;part du train!"; 
french[6]="Habiter dans un pays &#233;tranger est une bonne exp&#233;rience."; 
french[7]="Excusez-moi! Je suis en retard!"; 
french[8]="Est-ce que ce taxi est libre?"; 
french[9]="Faites attention quand vous descendez l'escalier."; 

Merci beaucoup pour votre aide.

Répondre

3

Je pense que vous devez utiliser innerHTML pour les caractères spéciaux pour s'interpréter:

phrase.innerHTML = french[phrasenum]; 
+0

@ Pekka- merci. J'avais cette chose même écrite mais j'avais innerText et pas innerHTML. Quelle différence un petit mot peut faire. Je vais regarder et voir quelle est la différence. Merci encore! – Ashley

+0

@Ashley Pas de problème. La différence est qu'avec 'innerText', chaque caractère est interprété * tel quel *, y compris le' & ',' # 'et ainsi de suite. Je pourrais écrire 'Bonjour' et il sortirait exactement de cette façon. 'innerHTML' interprète réellement les caractères en HTML, donc le résultat serait un analysé ** Hello **. –

+0

Merci d'expliquer la différence. Cela a beaucoup de sens. Merci! – Ashley

0

Si votre HTML/fichiers de code Javascript sont créés afin qu'ils utilisent Unicode, vous devriez être en mesure de mettre la ô et é caractères dans votre Javascript et HTML sans problèmes.

Questions connexes