HTM code

Hi I am tying to write code to translate to english on mousedown and french on mouseup. Can anyone assist. <p><span class="pnum">9</span><span class="phrase" onmousedown="swapFE()"
      onmouseup="swapEF"></span></p>
<p><span class="pnum">10</span><span class="phrase" onmousedown="swapFE()"
      onmouseup="swapEF"></span></p>
I have also included my script for .js file used.
function setUpTranslation() {
var phrases = document.getElementsByTagName("p");
for (var i=0; i<phrases.length; i++){
        phrases[i].childNodes[1].innerHTML=french[i];
   }
}

function swapFE(e) {
var phrase =eventSource(e);
var phrasenum= parseInt(phrases.previousSibling().innerHTML);
phrase.innerHTML=english[phrasenum-1];
phrase.style.fontStyle ="normal";
phrase.style.color = "rgb(155, 102, 102)";
}


function swapEF(e) {
phrase =eventSource(e);
phrase.innerHTML=french[phrasenum-1];
phrase.style.fontStyle="italic";
phrase.style.fontcolor=black;
}

Soldiergirl50Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
That looks far more complex than is necessary.

You are missing the () from swapEF and you do not have an eventSource function

Here is my suggestion

<html>
<head>
<script type="text/javascript">
var french = [
"La plume de ma tante est sur le bureau de mon oncle",
"Mon tailleur  est riche"
]; // note the lack of comma after the last item
var english = [
"My aunt's pen is on my uncle's desk",
"My tailor is rich"
]; 
function mouseDown() {
  this.innerHTML=french[this.id.substring(1)]; // ID="s1", substring(1) = 1
}
function mouseUp() {
  this.innerHTML=english[this.id.substring(1)];
}
window.onload=function() {
  var nofSpans = french.length; 
  for (var i=0;i<nofSpans;i++) {
    var span = document.createElement('span');
    span.id="s"+i
    span.innerHTML=english[i]
    span.onmousedown=mouseDown; // note the event handler is lowercase
    span.onmouseup=mouseUp;
    document.body.appendChild(span)
    document.body.appendChild(document.createElement('hr'))
  }
}
</script>
</head>
<body>
</body>
</html>

Open in new window

0
 
Soldiergirl50Author Commented:
function setUpTranslation() {
var phrases = document.getElementsByTagName ("p");
for (var i = 0; i < phrases.length; i++){
phrases[i].number = i;
        phrases[i].childNodes[1].innerHTML = french[i];

phrases[i].onmousedown = function (swapEF) {
this.childNodes[1].innerHTML = english[this.number];
this.childNodes[1]. style.fontStyle = "normal";
this.childNodes[1].style.color = "rgb(255, 0, 0)";
}
phrases[i].onmouseup = function(swapFE) {
this.childNodes[1].innerHTML = french[this.number];
this.childNodes[1].style.fontStyle = "italic";
thischildNodes[1].style.color = "rgb(0, 0, 0)";
}
}
}

function swapFE(e) {
var phrase =eventSource(e);
if (IE) phrase.attachEvent("on" + mousedown, swapFE);
else if (DOM) phrase.addEventListener(onmousedown, swapFE, false);
var phrasenum= parseInt(phrases.previousSibling().innerHTML);
phrase.innerHTML.nodeValue = english[phrasenum - 1];
phrase.style.fontStyle ="normal";
phrase.style.color = "rgb(0, 0, 0)";
}


function swapEF(e) {
var phrase =eventSource(e);
if (IE) phrase.attachEvent("on" + mouseup, swapFE);
else if (DOM) phrase.addEventListener(onmouseup, swapFE, false);
var phrasenum = parseInt (phrase.innerHTML.previousSibling);
phrase.innerHTML.nodeValue = french [phrasenum - 1];
phrase.style.fontStyle="italic";
phrase.style.fontcolor="rgb(255, 0, 0);"
}

0
All Courses

From novice to tech pro — start learning today.