Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript is not working.

    Im suppose to make a webpage where the French changes to English on a mouse click,well its not working for somereason,i think the problem of course is in my engfr.js code,here is all my codes,i tried everything I think! here is the html:

    french5.html
    Code:
    <LINK rel="stylesheet" type="text/css" href="styles.css" />
     <SCRIPT type="text/javascript" src="engfr.js"> 
     </SCRIPT>
     <SCRIPT type="text/javascript" src="french5.js"> 
     </SCRIPT>
     </HEAD><BODY>
     <DIV id="BabCorner">
     </DIV>
     <TABLE>
     <TBODY>
     <TR>
     <TD class="left">
     <B>French 101</B><BR />MWF: 9:00-9:50<BR />Rm. 402 Linton Hall 
     </TD>
     <TD class="right">
     <B>Prof. Eve Granger</B><BR />Office: 810 Linton Hall<BR />Hours: TR: 3:00-4:30 
     </TD>
     </TR>
     </TBODY>
     </TABLE>
     <H1>
     Week 5 Phrases:
     </H1>
     <H2>
     Press down your mouse button on each phrase to translate
     </H2>
     <P number="0">
     <SPAN class="pnum">1</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Cet hôtel n'est pas loin de la Tour Eiffel.</SPAN>
     </P>
     <P number="1">
     <SPAN class="pnum">2</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">A quelle heure arrive le train?</SPAN>
     </P>
     <P number="2">
     <SPAN class="pnum">3</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Nous attendons l'autobus depuis une demi-heure.</SPAN>
     </P>
     <P number="3">
     <SPAN class="pnum">4</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Ce repas est délicieux</SPAN>
     </P>
     <P number="4">
     <SPAN class="pnum">5</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Quel jour va-t-elle arriver?</SPAN>
     </P>
     <P number="5">
     <SPAN class="pnum">6</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Nous avons onze minutes avant le départ du train!</SPAN>
     </P>
     <P number="6">
     <SPAN class="pnum">7</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Habiter dans un pays étranger est une bonne expérience.</SPAN>
     </P>
     <P number="7">
     <SPAN class="pnum">8</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Excusez-moi! Je suis en retard!</SPAN>
     </P>
     <P number="8">
     <SPAN class="pnum">9</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Est-ce que ce taxi est libre?</SPAN>
     </P>
     <P number="9">
     <SPAN class="pnum">10</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Faites attention quand vous descendez l'escalier.</SPAN>
     <script type= text/javascript>
     <!--
    alert onClick("english[0]="This hotel isn't far from the Eiffel Tower.";")
     </script>
    
     </P>
     </BODY></HTML>
    engfr.js
    Code:
    window.onload = setUpTranslation; function setUpTranslation()(mEvent)
    {
    // swapFE
    if (MouseClick)
    {
    ;french1.htm
    if (mEvent.srcElement)
    
    }
    // Netscape and Firefox
    else if (mEvent.target)
    {
    alert(mEvent.target.nodeName);
    }
    }
    
    
    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 French version of that phrase.
    
    setUpTranslation()
    Insert the current week's french phrases into document and set up
    event handlers for the phrases.
    
    */
    
    function eventSource(e) {
    var IE = document.all ? true:false;
    var DOM = document.addEventListener ? true: false;
    if (IE) return event.srcElement;
    else if (DOM) return e.currentTarget;
    }
    
    function setUp() {
        var transDoc = document.getElementsById("doc");
    	var olElem = document.createElement("ol");
    		for (var i = 0; i < french.length; i++){
    	var newLI = document.createElement("li");
    		newLI.innerHTML = french[i];
    		newLI.id = i + "phrase";
    		newLI.style.cursor = "pointer";
    		addEvent(newLI, "mousedown", swapFE, false);
    		addEvent(newLI, "mouseup", swapEF, false);
    		olElem.appendChild (newLI);
    		}
    		transDoc.appendChild(olElem);
     }
    
    
    function swapFE(e) {
    var phrase = eventSource(e);
    if (IE) phrase.attachEvent( mousedown, swapFE);
    else if (DOM) phrase.addEventListener(mousedown, swapFE, false);
    var phrasenum = parseInt (phrase.innerHTML.previousSibling);
    phrase.innerHTML.nodeValue = english[phrasenum - 1];
    phrase.style.fontStyle = "normal";
    phrase.style.color = "rgb(155, 102, 102)";
    }
    
    
    function swapEF(e) {
    var phrase = eventSource(e);
    if (IE) phrase.attachEvent(mouseup, swapEF);
    else if (DOM) phrase.addEventListener(onmouseup, swapEF, false);
    var phrasenum = parseInt (phrase.innerHTML.previousSibling);
    phrase.innerHTML.nodeValue = french [phrasenum - 1];
    phrase.style.fontStyle = "italic";
    phrase.style.color = "black";
    }/*
    French5.js
    Code:
    Filename: french5.js
    
    
     Variable List:
     french
     Contains an array of 10 english phrases
    
     english
     Contains an array of 10 French translations
     */
    
     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.";
     /* Generated by Developer Tools. This might not be an accurate representation of the original source file */
     BODY {	MARGIN: 0px
    }
     TABLE {
     BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: white; FONT-SIZE: 11pt
     }
     TD {
     PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
     }
     TD.right {
     TEXT-ALIGN: right
     }
     H1 {
     PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
     }
     H2 {
     PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
     }
     P {
     PADDING-BOTTOM: 0px; MARGIN: 2px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
     }
     .pnum {
     BORDER-BOTTOM: rgb(155,102,102) 1px solid; TEXT-ALIGN: right; BORDER-LEFT: rgb(155,102,102) 1px solid; BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 30px; PADDING-RIGHT: 2px; COLOR: white; BORDER-TOP: rgb(155,102,102) 1px solid; MARGIN-RIGHT: 5px; BORDER-RIGHT: rgb(155,102,102) 1px solid
     }
     .phrase {
     FONT-STYLE: italic; CURSOR: pointer
     }
     H1 {
     MARGIN: 20px 0px 5px; FONT-SIZE: 14pt
     }
     H2 {
     MARGIN: 5px; FONT-SIZE: 10pt; FONT-WEIGHT: normal
     }

    styles.css
    Code:
    <style type="text/css">
    BODY { MARGIN: 0px
    }
    TABLE {
    BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: white; FONT-SIZE: 11pt
    }
    TD {
    PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
    }
    TD.right {
    TEXT-ALIGN: right
    }
    H1 {
    PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
    }
    H2 {
    PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
    }
    P {
    PADDING-BOTTOM: 0px; MARGIN: 2px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
    }
    .pnum {
    BORDER-BOTTOM: rgb(155,102,102) 1px solid; TEXT-ALIGN: right; BORDER-LEFT: rgb(155,102,102) 1px solid; BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 30px; PADDING-RIGHT: 2px; COLOR: white; BORDER-TOP: rgb(155,102,102) 1px solid; MARGIN-RIGHT: 5px; BORDER-RIGHT: rgb(155,102,102) 1px solid
    }
    .phrase {
    FONT-STYLE: italic; CURSOR: pointer
    }
    H1 {
    MARGIN: 20px 0px 5px; FONT-SIZE: 14pt
    }
    H2 {
    MARGIN: 5px; FONT-SIZE: 10pt; FONT-WEIGHT: normal
    }
    </style>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    This solution satisfies your requirements, but maybe not your needs.
    You will need to add back in your CSS stuff.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    
    </head>
    <body>
    <div id="convert"></div>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=297080
    
    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.";
    
    window.onload = function() {
      var str = '';
      for (var i=0; i<english.length; i++) {
        str += '<input type="checkbox" name="CBox" onclick="toggleLanguage()"> ';
        str += '<span name="Lang">'+english[i]+'</span><p>';
      }
      document.getElementById('convert').innerHTML = str;
    }
    function toggleLanguage() {
      var selCBox = document.getElementsByName('CBox');
      var selSpan = document.getElementsByName('Lang');
      for (var i=0; i<selCBox.length; i++) {
        if (selCBox[i].checked) { selSpan[i].innerHTML = french[i]; }
                           else { selSpan[i].innerHTML = english[i]; }
      }
    }
    </script>
    
    </body>
    </html>


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •