Javascript function issue |
Javascript function issue |
charlietan1911 |
Sep 9 2013, 12:11 PM
Post
#1
|
Group: Members Posts: 3 Joined: 6-September 13 Member No.: 19,677 |
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."; This post has been edited by charlietan1911: Sep 9 2013, 12:17 PM Attached File(s) French5.html ( 1.51k ) Number of downloads: 412 styles.css ( 826bytes ) Number of downloads: 195 |
pandy |
Sep 9 2013, 12:33 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
QUOTE 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."; 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. |
charlietan1911 |
Sep 9 2013, 03:09 PM
Post
#3
|
Group: Members Posts: 3 Joined: 6-September 13 Member No.: 19,677 |
QUOTE 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."; 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. |
Christian J |
Sep 9 2013, 04:00 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,628 Joined: 10-August 06 Member No.: 7 |
QUOTE CODE phrase = eventSource(e); 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: CODE function swapFE(e) { 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. |
charlietan1911 |
Sep 10 2013, 08:38 AM
Post
#5
|
Group: Members Posts: 3 Joined: 6-September 13 Member No.: 19,677 |
QUOTE CODE phrase = eventSource(e); 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: CODE function swapFE(e) { 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". |
Lo-Fi Version | Time is now: 19th March 2024 - 08:38 AM |