The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Javascript function issue
charlietan1911
post 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)
Attached File  French5.html ( 1.51k ) Number of downloads: 412
Attached File  styles.css ( 826bytes ) Number of downloads: 195
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
charlietan1911
post Sep 9 2013, 03:09 PM
Post #3





Group: Members
Posts: 3
Joined: 6-September 13
Member No.: 19,677



QUOTE(pandy @ Sep 9 2013, 12:33 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 9 2013, 04:00 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
charlietan1911
post Sep 10 2013, 08:38 AM
Post #5





Group: Members
Posts: 3
Joined: 6-September 13
Member No.: 19,677



QUOTE(Christian J @ Sep 9 2013, 04:00 PM) *

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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:47 AM