照抄书里的代码但函数无法执行、求分析（ Uncaught ReferenceError: xxx is not defined）

[lenkaren]

函数的功能是实现html文档下的<p>元素内容向某个指定位置以动画的方式移动。

html部分的代码，文件名：message.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/moveMessage.js"></script>
<script type="text/javascript" src="scripts/positionMessage.js"></script>
<title>MoveMessage</title>
</head>
<body>
<p id="message">Whee!!!</p>
</body>
</html>

同一个路径下的scripts文件夹内的三个javascript文件

1、scripts/addLoadEvent.js，可以不断绑定函数到window.onload事件上：

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

2、scripts/moveMessage.js，定义函数来移动元素，再由下面的positionMessage.js负责传递参数；

function moveElement(elementID,final_x,final_y,interval){
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	var xpos=parseInt(elem.style.left);
	var ypos=parseInt(elem.style.top);
	if (xpos==final_x && ypos==final_y){
		return true;
	}
	if(xpos<final_x){
		xpos++;
	}
	if(xpos>final_x){
		xpos--;
	}
	if(ypos<final_y){
		ypos++;
	}
	if(ypos>final_y){
		ypos--;
	}
	elem.style.left =xpos+"px";
	elem.style.top =ypos+"px";
	var repeat="moveElement("+'elementID'+","+final_x+","+final_y+","+interval+")";
	movement=setTimeout(repeat,interval);//每interal毫秒递归调用一次moveElement()
}

3、scripts/positionMessage.js，获取指定元素和定义其初始位置，再调用moveMessage.js

function positionMessage(){
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var elem=document.getElementById("message");
	elem.style.position="absolute";
	elem.style.left="400px";
	elem.style.top="300px";
	moveElement("message",250,250,20);
}
addLoadEvent(positionMessage);//页面加载完毕时执行positionMessage

最后再问一个问题……下面用一串字符串传递参数的语法我无法理解，高手求分析，里面的加号、双引号、单引号都是怎么一回事？（这两行代码位于moveElement函数内）

var repeat="moveElement("+'elementID'+","+final_x+","+final_y+","+interval+")";
	movement=setTimeout(repeat,interval);//每interal毫秒递归调用一次moveElement()

附上目前函数的运行情况截图。顺带一提，如果我把positionMessage.js内第8行的”message“改成message（就是消除双引号，不会有js报错，但动画函数依旧无法生效）

[tongki_88]

//找到问题了，
//var repeat="moveElement("+ 'elementID' +"',"+final_x+","+final_y+","+interval+")";
//改成：
var repeat="moveElement('"+ elementID +"',"+final_x+","+final_y+","+interval+")";

[tongki_88]

function moveElement(elementID,final_x,final_y,interval){...} moveElement("message",250,250,20); 可见，elementID是局部字符串变量，此例中的值是"message"，而不是'elementID' var repeat="moveElement('"+ elementID +"',"+final_x+","+final_y+","+interval+")";

[lenkaren]

引用 4 楼 tongki_88 的回复:

function moveElement(elementID,final_x,final_y,interval){...} moveElement("message",250,250,20); 可见，elementID是局部字符串变量，此例中的值是"message"，而不是'elementID' var repeat="moveElement('"+ elementID +"',"+final_x+","+final_y+","+interval+")";

谢谢解答！改了代码果然生效了。可惜还不是十分理解……T-T 是不是生效的原因是相当于执行了 ： moveElement('elementID',250,250,20);？ （抱歉一时间也不知道怎么问好，请等我有空再仔细思考下、或者要好好想该怎么问才好……诶，还在加班伤不起） 再次感谢前辈的热心帮助。

[笑梦码侬生]

repeat就是一段字符串，然后这段字符就是前面moveElement函数，这个函数通过定时器来触发，作为回调函数。 elementID这样的一个ID号，你在网页中找不到，所以出现未定义。

[tongki_88]

在positionMessage()中，那个var elem=document.getElementById("message");的前后加alert()；看看是否有执行到该步？

[tongki_88]

在这个： var repeat="moveElement('"+ elementID +"',"+final_x+","+final_y+","+interval+")"; 的下页加一行： alert(repeat); 你就知道了。

[lenkaren]

引用 6 楼 tongki_88 的回复:

在这个： var repeat="moveElement('"+ elementID +"',"+final_x+","+final_y+","+interval+")"; 的下页加一行： alert(repeat); 你就知道了。

哈哈，的确懂了。关键是要把值message正确传递过去。理解后用下面的代码也能实现同样效果了~

var repeat="moveElement(\""+elementID+"\","+final_x+","+final_y+","+interval+")"

[my_dataname]

我改了还是不行呢