Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ Javascript function issue
Posted by: charlietan1911 Sep 9 2013, 12:11 PM
I am working on a school project and I cant get my JavaScript to work correctly. I am unsure of why and I have gone over my text book many times. The project is for a French class that puts some vocabulary sentences on the website. When students visit the site, each sentence is in French and when they click the mouse button down and hold on any sentence, it translates the French sentence selected to English. When the student releases the mouse button, it goes back to the French sentence. I have attached the files necessary for this website to work. The engfr.js file is the main file to swap the French to English.
I cant get the functions to swap the French to English and back. I cant see what I am missing. If anyone can help me that would be great. My functions are below. I have another .js file that I couldn't upload and that is below the functions.
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;
}
function setUpTranslation() {
phrases = document.getElementsByTagName("p");
for (var i=0; i<phrases.length; i++) {
phrases[i].childNodes[1].innerHTML = french[i];
phrases[i].childNodes[1].onmousedown = swapFE;
phrases[i].childNodes[1].onmouseup = swapEF;
}
}
function swapFE(e) {
phrase = eventSource(e);
if (phrase.nodeName == "#text"){
phrase=eventSource(e).parentNode;
phraseNum=parseInt(phrase.previousSibling.innerHTML);
phrase[phraseNum].childNodes[1].innerHTML = english[phraseNum-1];
}
}
function swapEF(e){
phrase=eventSource(e);
if(phrase.nodeName == "#text"){
phrase=eventSource(e).parentNode;
phraseNum=parseInt(phrase.previousSibling.innerHTML);
phrase.innerHTML = french[phraseNum-1];
}
}
Other .js file:
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ô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élicieux";
french[4]="Quel jour va-t-elle arriver?";
french[5]="Nous avons onze minutes avant le départ du train!";
french[6]="Habiter dans un pays étranger est une bonne expé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.";
Attached File(s)
French5.html ( 1.51k )
Number of downloads: 413
styles.css ( 826bytes )
Number of downloads: 195
Posted by: pandy Sep 9 2013, 12:33 PM
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ô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élicieux";
french[4]="Quel jour va-t-elle arriver?";
french[5]="Nous avons onze minutes avant le départ du train!";
french[6]="Habiter dans un pays étranger est une bonne expé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.";
To begin with, JavaScript is case sensitive. To declare a variable you use the 'var' keyword. Note it's lower case. Also English and english are not the same thing. Choose one. Fixing that will make the phrases show up on the page at least.
Posted by: charlietan1911 Sep 9 2013, 03:09 PM
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ô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élicieux";
french[4]="Quel jour va-t-elle arriver?";
french[5]="Nous avons onze minutes avant le départ du train!";
french[6]="Habiter dans un pays étranger est une bonne expé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.";
To begin with, JavaScript is case sensitive. To declare a variable you use the 'var' keyword. Note it's lower case. Also English and english are not the same thing. Choose one. Fixing that will make the phrases show up on the page at least.
Yes I am aware of the case sensitive. I think that copying and pasting that file made the "var" and "english" capitalized. I appreciate the response.
Posted by: Christian J Sep 9 2013, 04:00 PM
if (phrase.nodeName == "#text")
The above implies that a text node is the event source, but only element nodes can cause mouse events. I'd rewrite the two swap functions like this:
{
phrase = eventSource(e);
if (phrase.nodeName == "SPAN")
{
phraseNum=parseInt(phrase.previousSibling.innerHTML);
phrase.innerHTML = english[phraseNum-1];
}
}
function swapEF(e)
{
phrase=eventSource(e);
if (phrase.nodeName == "SPAN")
{
phraseNum=parseInt(phrase.previousSibling.innerHTML);
phrase.innerHTML = french[phraseNum-1];
}
}
As a sidenote: I also recommend adding a Doctype to the HTML file, to make CSS render properly: http://htmlhelp.com/faq/html/basics.html#doctype
Also add a NOSCRIPT message that javascript is required to make the page work.
Posted by: charlietan1911 Sep 10 2013, 08:38 AM
if (phrase.nodeName == "#text")
The above implies that a text node is the event source, but only element nodes can cause mouse events. I'd rewrite the two swap functions like this:
{
phrase = eventSource(e);
if (phrase.nodeName == "SPAN")
{
phraseNum=parseInt(phrase.previousSibling.innerHTML);
phrase.innerHTML = english[phraseNum-1];
}
}
function swapEF(e)
{
phrase=eventSource(e);
if (phrase.nodeName == "SPAN")
{
phraseNum=parseInt(phrase.previousSibling.innerHTML);
phrase.innerHTML = french[phraseNum-1];
}
}
As a sidenote: I also recommend adding a Doctype to the HTML file, to make CSS render properly: http://htmlhelp.com/faq/html/basics.html#doctype
Also add a NOSCRIPT message that javascript is required to make the page work.
Thank you very much for your response. I made the changes and it worked. That makes much more sense to use "SPAN" instead of "#text".
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)