2 scar dante scar_dante 于 2016.05.08 20:53 提问

JavaScript DOM编程艺术问题

新手初学JavaScript,第十章moveElement实验是碰到一个error,
moveMessage的第三行报Uncaught TypeError: Cannot read property 'style' of nullmoveElement,自己尝试了一下断点调试,发现第一次运行moveMessage函数不会报错,第二次递归调用的时候就会报这个错,新人求助,html代码传上来标签就看不到了,无奈只好发图

图片说明

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

moveElement.js:
function moveElement(elementID,final_x,final_y,interval){
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(ypos < final_y){
ypos++;
}
if(xpos > final_x){
xpos--;
}
if(ypos > final_y){
xpos--;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" +elementID+ "'," +final_x+ "," +final_y+ "," +interval+ ")";
movement = setTimeout(repeat,interval);
}
addLoadEvent(moveElement);

positionMessage.js:
function positionMessage(){
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
moveElement("message",200,100,10);
}
addLoadEvent(positionMessage);

2个回答

danielinbiti
danielinbiti   Ds   Rxr 2016.05.08 21:13
已采纳
 去掉
 //addLoadEvent(moveElement); 
 这个不带参数的moveElement,如果执行,没有传入id,肯定找不到dom节点,报错
danielinbiti
danielinbiti 回复scar_dante: 看多了,习惯了就好,如果有帮助,记得采纳一下哦
大约 2 年之前 回复
hanysnow
hanysnow 使用ISAPI的方式
大约 2 年之前 回复
scar_dante
scar_dante 谢谢指点,刚开始学,很难意识到这种错误
大约 2 年之前 回复
CSDNXIAOS
CSDNXIAOS   2016.05.08 21:02

JS中数组的批量填充方式:  1.在声明时同时进行填充        var beatles = Array("John","Paul","George","Ringo");  2.我们甚至用不着明确地表明我们是在创建数组.事实上,只需用一堆方括号括起来就足以创建我们想要的数组了:        var beatles = ["John","Paul","George","......
答案就在这里:《Javascript DOM 编程艺术》
----------------------Hi,地球人,我是问答机器人小S,上面的内容就是我狂拽酷炫叼炸天的答案,除了赞同,你还有别的选择吗?

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
javascript dom 编程艺术第十章的一个问题
最近在看《Javascript Dom编程艺术》,在阅读到第十章“用javascript实现动画效果”时遇到一个问题,思考之后记录在此。function moveElement(elementID,final_x,final_y,interval){ if(!document.getElementById(elementID)){ return false; } var elem = d...
《JavaScript DOM编程艺术》第十章 用javascript实现动画效果
list.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web Design</title> <link href="css/layout2.css" rel="stylesheet" media="screen" /></head> <body> <p id="messag
案例研究:图片库改进版(js dom编程艺术第六章笔记)
本章完成的主要工作小结: 1.尽量让js代码不再依赖于那些没有保证的假设,为此引入测试项和检查,是js代码能够平稳退化 2.避免使用onkeypress事件处理函数 3.html标记文档与js分离 源代码: Image Gallery Snapshots Fireworks Coffee
JavaScript DOM编程艺术第二版+源代码
JavaScript DOM编程艺术第二版+源代码。不仅是扫描版,还有书中所涉及到的源代码。很适合JavaScript初学者使用,能够充分学习DOM。
【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记
经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老师的教学视频学习了JavaScript,复习了之前的学习笔记后,我发现看视频理解虽然没问题,但是很多细节,关键词,都没能记住,而且对于对象,DOM变成的理解都不够深入,只是简单的知道它们能够实现什么
JavaScript_DOM编程艺术第二版(中文)
JavaScript_DOM编程艺术第二版(中文) 个人收集电子书,仅用学习使用,不可用于商业用途,如有版权问题,请联系删除!
javascript dom编程艺术网页案例
包含了五个页面,N多函数,完成工作有幻灯片,点击显示内容功能,图片库,表格优化,表单优化,我自己没有写最后表单的ajax 在博客上只放了 js 函数代码,是供自己温习,想要学习建议阅读书籍。 案例放在github,地址:https://github.com/UnaMaatin/javascript-dom
javascript DOM编程艺术 读后感与笔记
书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后立马会在前一个案例的基础上实现增强,而提供的代码也经过抽象处理,通用性很高。作为最后结束的一个综合示例,将本书学到的几乎全部知识都集中运用在同一个案例,增强了知识之间的联系,易于回忆。总的来说,该书作
JavaScript DOM编程艺术(第2版)-配套源代码
JavaScript DOM编程艺术(第2版)配套源代码,也是学习和研究javascript的优秀参考代码。
JavaScript+DOM编程艺术 第三章 DOM
DOM简介1.HTML DOM:网页被加载时,浏览器会创建文档对象模型 2.DOM操作HTML:改变HTML的元素、属性、CSS样式、对所有事件作出反应DOM操作HTML不要在文档加载完成后使用document.write()<script> document.write("hello");//改变文档输出流 </script>