Question

My code works in IE but not in Firefox. I am trying to get the onmousedown and onmouseup events to work as well as the functions swapFE, swapEF and setUpTranslation in a browser other than IE. I basically have French phrases that appear upon the browser loading and when I click down on a phrase with my mouse they should translate to English and when I let up on the mouse they should turn back to French. That’s the basic idea. Any other questions feel free to ask.

Could you look at the code below and make suggestions on what I’m doing wrong for non-IE browsers. I can get this to work for IE if I uncomment out the correct lines but it doesn’t seem to work for Firefox.

Any suggestions?

 /*
   Function List:
   eventSource(e)
      Returns the source of an event in either event model

   swapFE(phrase, pnum)
      Changes a French phrase to the English version of that phrase.

   swapEF(phrase, pnum)
      Changes an English phrase ot the Frech version of that phrase.

   setUpTranslation()
      Insert the current week's french phrases into document and set up
      event handlers for the phrases.
*/

//Returns the source of an event in either event model
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;
}
//I added the function below to try and make it cross-browser compatible but it did not work....help!
//function applysetUpTranslation(phrases[i],"click",swapFE(e),false) {
//if (IE) phrases[i].attachEvent("on"+onmousedown, swapFE(e));
//else if (DOM) phrases[i].addEventListener(click,swapFE(e),true);
//}


function setUpTranslation() {
   var IE = document.attachEvent ? true:false;
   var DOM = document.addEventListener ? true: false;
   var phrasesContainer = document.getElementById("phrases");
   var phrases= phrasesContainer.getElementsByTagName("p");

   for (i = 0; i<phrases.length; i++) {
      phrases[i].number = i;
      phrases[i].childNodes[1].innerHTML = french[i];
      phrases[i].childNodes[1].id = i;

//childNodes[1] is the second span in the <p> array
//I noticed that the function is referenced here as swapFE(event) and the function is written as swapFE(e)...does that make a difference in what shows up??

 //phrases[i].childNodes[1].onmousedown = function() { swapFE(event); };

 phrases[i].childNodes[1].onmousedown = swapFE; 

 //phrases[i].childNodes[1].onmouseup = function() { swapEF(event); }; 

 phrases[i].childNodes[1].onmouseup = swapEF;   

  }

}

//this function changes the French phrase to an English phrase.
function swapFE(e) {
       var phrase = eventSource(e);
       //phrase.innerText = english[phrase.id];
       var parent = phrase.parentNode;
       //childNodes[0] is the number of the phrase +1 
       var idnum = parent.childNodes[0];
       //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number.
       var phrasenum = parseInt(idnum.innerHTML)-1;
       phrase.innerText = english[phrasenum];
       parent.childNodes[1].style.fontStyle= "normal";
       parent.childNodes[1].style.color = "rgb(155, 102, 102)";
  }


function swapEF(e) {
       var phrase = e.srcElement; 
       //phrase.innerText = english[phrase.id];
       var parent = phrase.parentNode;
       var idnum = parent.childNodes[0];
       var phrasenum = parseInt(idnum.innerHTML)-1;
       phrase.innerText = french[phrasenum];
       parent.childNodes[1].style.fontStyle= "italic";
       parent.childNodes[1].style.color= "black";
}

Answer 1

I was able to get my website to work in Firefox. I figured out that my main problem was that I had been using innerText rather than innerHTML in some of the declarations. Changing that made my website work in IE, Firefox and Chrome. Thanks for all suggestions and help though. I appreciate it.

Ashley