Question

I am doing a project for school and I’m really struggling to understand how to create the code/commands for my for loop in JavaScript. Any help would be greatly appreciated.

The project is basically this:

• There are two arrays: one set of 10 French words another with a set of 10 English words. They look like this:

  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.";
  

• I have to create a function named setUpTranslation(). The purpose of the function is to place the French phrases into the document and set up the event handlers for the mouse-down and mouse-up events.

To create the For Loop it says:

create a for loop that loops through each of the objects in the phrases collection. For each object in the collection do the following:

1. Change the inner content of the second child node of the object to french[i] where i is the value of the counter variable for the for loop.
2. Run the swapFE() function in response to the mouse-down event occurring within the object’s second child node
3. Run the swapEF() function in response to a mouse-up event occurring within the object’s second child node.

Then after setting up the for loop I’m to work on the swapFE() and swapEF() functions, but right now I’m just trying to fix the for loop.

Here’s what I have so far for the setUpTranslation function:

function setUpTranslation() {
   var phrases = document.getElementsByTagName("p");   
   
   for (i = 0; i< phrases.length; i++) {
       
  }

}

I have tried numerous code in the for loop but none of it seems to display the French phrase.

Answer 1

I haven’t worked with JavaScript for many years, but what this assignment essentially asks you to do is to manipulate the DOM (the tree that represents your HTML document).

Your current tree structure is this:

Root
Child node of type P
First child node of type span and class pnum
Second child node of type span and class phrase
Another child node of type P
…
…

What your current code does is that in every iteration, you get an index from 0 to the number of child nodes of type P. You can use that to retrieve the child node of type P from the array phrases.

Now, what you are expected to do, is to use that node to obtain the second child node (the one of type phrase). There is a JavaScript operation for that. Then, you can replace the contents of that node with the contents of the string french[i]. Again, there is a JavaScript operation for that. If you do that correctly and then get to run the setup function, your document should change in place to include the French phrases after the numbers, instead of what is currently a blank area.

Because it’s a homework question I can’t give you the exact code you have to use (plus, it’s been too long since I’ve written any JavaScript). However, if you look in the material you got from the course or the JavaScript reference that you got, you will see the exact operations to do each of the things I mentioned.