0

我正在为一个类做一个 Javascript 项目,但似乎无法让其中两个函数起作用。它们是swapFE 和swapEF。基本上我想要做的是,当用户点击鼠标按钮时,法语短语会切换为英语。当鼠标按钮被释放时,它应该切换回法语。以下是我为整个项目所拥有的内容,包括 HTML 代码。如果有人能指出我做错了什么,我将不胜感激。

    <?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 7
   Case Problem 1

   French Phrases
   Author:  Chris Carter        
   Date:  10/21/2013           

   Filename:         french5.htm
   Supporting files: engfr.js, french.js, styles.css

-->
   <title>French Phrases Week 5</title>
   <link href="styles.css" rel="stylesheet" type="text/css" />
   <script src ="engfr.js" type ="text/javascript"></script>
   <script src ="french5.js" type ="text/javascript"></script>


</head>

<body>
   <div id = "page">
      <div id="head">
         <div id = "rightHead">
            <b>Prof. Eve Granger</b><br />
            Office: 810 Linton Hall<br />
            Hours: TR: 3:00-4:30
         </div>
         <div id = "leftHead">
            <b>French 101</b><br />
            MWF: 9:00-9:50<br />
            Rm. 402 Linton Hall
         </div>
      </div>

      <ul id="links">
         <li class="newgroup"><a href="#">Home</a></li>
         <li class="newgroup"><a href="#">Phrases</a></li>
         <li><a href="#">Week 1 Phrases</a></li>
         <li><a href="#">Week 2 Phrases</a></li>
         <li><a href="#">Week 3 Phrases</a></li>
         <li><a href="#">Week 4 Phrases</a></li>
         <li><a href="#">Week 5 Phrases</a></li>
         <li class="newgroup"><a href="#">Quizzes</a></li>
         <li><a href="#">Chapter 1 Quiz</a></li>
         <li><a href="#">Chapter 2 Quiz</a></li>
         <li><a href="#">Chapter 3 Quiz</a></li>
         <li class="newgroup"><a href="#">Dept. of French</a></li>
         <li><a href="#">French 101</a></li>
         <li><a href="#">French 135</a></li>  
         <li><a href="#">French 155</a></li>  
         <li><a href="#">French 201</a></li>  
         <li><a href="#">French 301</a></li>   
         <li class="newgroup"><a href="#">Staff</a></li>
         <li><a href="#">Denise Abbot</a></li>
         <li><a href="#">Viola Devreaux</a></li>
         <li><a href="#">Eve Granger</a></li>
         <li><a href="#">Cynthia Trudeau</a></li>
         <li><a href="#">Gary Vironque</a></li>
      </ul>

      <div id = "doc">
         <h1>Week 5 Phrases</h1>
         <h2>Press down your mouse button on each phrase to translate</h2>

      </div>
      <address>
         French-English Translation Page
      </address>
   </div>

</body>

</html>

这是具有英语和法语数组的 JavaScript 代码...

  /*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 7
   Case Problem 1

   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&#244;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&#233;licieux";
    french[4]="Quel jour va-t-elle arriver?";
    french[5]="Nous avons onze minutes avant le d&#233;part du train!";
    french[6]="Habiter dans un pays &#233;tranger est une bonne exp&#233;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.";

这是我目前正在处理的代码......

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 7
   Case Problem 1

   Author: Chris Carter
   Date:   10/21/2013  

   Filename: engfr.js


   Function List:

   addEvent(object, evName, fnName, cap)
      Adds an event hander to object where evName is the name of the event,
      fnName is the function assigned to the event, and cap indicates whether
      event handler occurs during the capture phase (true) or bubbling
      phase (false)

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

   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.

*/

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

addEvent (window, "load", setUp, false);

function setUp() {
    var transDoc = document.getElementById("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, "onmousedown", swapFE, false);
        addEvent(newLI, "onmouseup", swapEF, false);
        olElem.appendChild(newLI);
    }
    transDoc.appendChild(olElem);
}

function swapFE(phrase, pNum) {
    var phrase = e.target || event.srcElement;
    var pNum = 0;
    if (phrase.nodeType == "#text") {
        phrase = phrase.parent.Node
    }
        pNum = parseInt(phrase.id);
        phrase.innerHTML = english[pNum];
        phrase.style.fontStyle = "italic";
        phrase.style.color = "rgb(155, 102, 102)";
    }
}

function swapEF(phrase, pNum) {
    var phrase = e.target || event.srcElement;
    var = 0;
    if (phrase.nodeType == "#text") {
        phrase = phrase.parentNode
    }
        pNum = parseInt(phrase.id);
        phrase.innerHTML = french[pNum];
        phrase.style.fontStyle = "normal";
        phrase.style.color = "black";
    }
}
4

1 回答 1

0

函数 addEvent 已经将“on”添加到“onMouseDown”和“onMouseUp”删除 on 将解决您的问题并允许您继续调试。

于 2013-11-02T20:39:36.433 回答