Javascript 功能未按预期工作
我正在为一个类做一个Javascript项目，似乎无法让其中两个函数正常工作。他们是swapFE和swapEF。基本上，我想做的是，当用户点击鼠标按钮时，法语短语会转换成英语。当鼠标按钮被释放时，它应该换回法语。下面是我为整个项目准备的内容，包括HTML代码。如果有人能指出我做错了什么，我将不胜感激Javascript 功能未按预期工作,javascript,javascript-events,Javascript,Javascript Events,我正在为一个类做一个Javascript项目，似乎无法让其中两个函数正常工作。他们是swapFE和swapEF。基本上，我想做的是，当用户点击鼠标按钮时，法语短语会转换成英语。当鼠标按钮被释放时，它应该换回法语。下面是我为整个项目准备的内容，包括HTML代码。如果有人能指出我做错了什么，我将不胜感激 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<?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>
/*
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";
}
}
/*
JavaScript新视角，第2版
教程7
案例问题1
作者：克里斯·卡特
日期：2013年10月21日
文件名：engfr.js
功能列表：
addEvent（对象、evName、FName、cap）
将事件处理程序添加到evName为事件名称的对象，
fnName是分配给事件的函数，cap指示是否
事件处理程序在捕获阶段（true）或冒泡期间发生
相位（假）
设置（）
将本周的法语短语插入文档并设置
短语的事件处理程序。
swapFE（短语，pnum）
将法语短语更改为该短语的英语版本。
swapEF（短语，pnum）
将英语短语更改为该短语的Frech版本。
*/
函数addEvent（对象、evName、FName、cap）{
if（object.attachEvent）
object.attachEvent（“on”+evName，fnName）；
else if（object.addEventListener）
object.addEventListener（evName、fnName、cap）；
}
addEvent（窗口“加载”，设置，错误）；
函数设置（）{
var transDoc=document.getElementById（“doc”）；
var olElem=document.createElement（“ol”）；
对于（变量i=0；i/*
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";
}
}