Help needed for non-IE browser compatibility in JavaScript

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 now understand what the problem is. When raising an event Firefox will pass the event object to the function, while IE will set a global event object.

Take a look at this line:

e = e || event;

If the current browser is IE the argument e will be undefined and we should assign the global object event to the argument e.

function swapFE(e) {
       if (!e) {
           alert("This is IE!");
       }
       else {
           alert("This is not IE!");
       }
       e = e || event;
       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)";
}

Answer 2

As a suggestion, you may want to take some time and look into jQuery as it's ability to deal with events across browsers is very good. The code to do what you wanted to do could be a bit simpler.

I also notice that you are setting the english phrase based on dom node number. I'm fairly sure this isn't going to be a reliable from a cross browser perspective. Here is how I would approach that problem using jQuery.

First the HTML

<div class="text">
   <span class="french">French Phrase</span>
   <span class="english" style="display:none;">English Phrase</span>
</div>

Repeat that as many times as needed.

Now some jQuery

$('.text').bind("mousedown",function() {
   $(this).find(".french").hide();
   $(this).find(".english").show();
});
$('.text').bind("mouseup",function() {
   $(this).find(".english").hide();
   $(this).find(".french").show();
});

These two jQuery statements will bind the mousedown and mouseup events to all of the elements within the page that have the "text" class. Then when mousedown happens, it looks for the elements nested within that element with classes "french" and "english" and shows/hides them (sets the css "display" property) to display the language you want.

So if you are willing to consider jQuery as an option you might try this.

Answer 3

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