Using child nodes and looping out the data? Sounds technical but simple question

JavaScript
1

This isn’t for me, it’s for a friend, and I’ve been asked to help.

I have two arrays. english() and french(), and each contain 10 quotes. I then have this HTML

<p><span class="pnum"> 1</span><span class="phrase"></span></p>
<p><span class="pnum"> 2</span><span class="phrase"></span></p>
<p><span class="pnum"> 3</span><span class="phrase"></span></p>
<p><span class="pnum"> 4</span><span class="phrase"></span></p>
<p><span class="pnum"> 5</span><span class="phrase"></span></p>
<p><span class="pnum"> 6</span><span class="phrase"></span></p>
<p><span class="pnum"> 7</span><span class="phrase"></span></p>
<p><span class="pnum"> 8</span><span class="phrase"></span></p>
<p><span class="pnum"> 9</span><span class="phrase"></span></p>
<p><span class="pnum">10</span><span class="phrase"></span></p>

Look at the comment in there to see what I need to do. I assume I would use .childNodes to get the end result, but I’ve never worked with nodes before, how would I reference the 2nd child (aka .phrase) and loop out the array in there?

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() {
   var phrases = document.getElementsByTagName("p");
   for (var i=0; i < phrases.length; i++) {
	//Here I need to reference the second child and change the inner content to french[i]
   }
}
2

what About tihis:

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() {
   var phrases = document.getElementsByTagName("p");
   for (var i=0; i < phrases.length; i++) {
	// get ihe current P and than get all the span's, 
	//select the second one (id=1) and do innerHTML
	phrases[i].getElementsByTagName("span")[1].innerHTML=english[i]
   }
}
3

Thanks, that works. How would I, upon click, swap out the text for the other language? I don’t know how to add onClicks (using unobtrusive JS). I assume the condition ls to check what array is being spat out, and the action would be to swap out the language (using if/else?)
phrases[i].getElementsByTagName(“span”)[1].innerHTML=english[i]

I can’t word things properly over the internet, blah. Hopefully you all understand. Thanks so far.

4

Not to be pushy :)…

5

Assuming you have the French text in an array, you could do this:

function setUpTranslation() {
  var phrases = document.getElementsByTagName("p");
  for (var i=0, j = phrases.length; i < j; i++) {
    phrases[i].onclick = function() {
      this.lastChild.firstChild.nodeValue = french[i];
    }
   }
}

var french = [
  'un',
  'deux',
  ...
];

Pretending that attachEvent will tell you if IE is being used is NOT correct. Opera supports it too. You should do object detection for whatever it is you directly want to use:

function eventSource(e) {
   return window.event ? window.event.srcElement : e.currentTarget;
}
6

Thanks, Finished it up earlier this morning right before work, using something like what you have up there.

Appreciate it :).