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ô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.";
這是我目前正在使用的代碼...
/*
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";
}
}