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

lenkaren 2014-09-29 09:02:42

函数的功能是实现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报错，但动画函数依旧无法生效）

...全文

12351 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

my_dataname 2016-03-04

打赏
举报

我改了还是不行呢

lenkaren 2014-10-02

打赏
举报

引用 6 楼 tongki_88 的回复:

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

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

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

tongki_88 2014-09-30

打赏
举报

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

tongki_88 2014-09-29

打赏
举报

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

笑梦码侬生 2014-09-29

打赏
举报

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

lenkaren 2014-09-29

打赏
举报

引用 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);？（抱歉一时间也不知道怎么问好，请等我有空再仔细思考下、或者要好好想该怎么问才好……诶，还在加班伤不起）再次感谢前辈的热心帮助。

tongki_88 2014-09-29

打赏
举报

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+")";

tongki_88 2014-09-29

打赏
举报

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