转行学开发,代码100天。

初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误。 -"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js-01</title>
<script type="text/javascript">
document.getElementById("pid").innerHTML = "Hello World.";
</script> </head>
<body>
<p id ="pid">Hello</p>
</body>
</html> 解释:错误原因为document中的innerHTML为空,也就是说在加载js文件时,找不到其中调用的对象即文中的<p>标签。 因此需要将js文件引用放置到<p>标签之后,即
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js-01</title>
</head>
<body>
<p id ="pid">Hello</p>
<script type="text/javascript">
document.getElementById("pid").innerHTML = "Hello World.";
</script>
</body>
</html> 此时网页输出为:
总结:这个小问题暴露了html文件加载顺序的理解问题。即html中的内容是按照HTML本身的先后顺序加载的。因此在引入js时或者直接添加<script>内容时在html内容之后执行。 其他说明见 https://www.cnblogs.com/Walker-lyl/p/5262075.html
 

 

day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误的更多相关文章

  1. JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...

  2. Uncaught TypeError: Cannot set property 'innerHTML' of null

    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...

  3. Uncaught TypeError: Cannot read property 'length' of null错误怎么处理?

    Uncaught TypeError: Cannot read property 'length' of null 错误怎么处理? 1.可能是返回的datagrid数据格式有问题,比如{"t ...

  4. (转)Uncaught TypeError: Cannot set property 'innerHTML' of null

    (转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...

  5. 前台报错:Uncaught TypeError: Cannot read property '0' of null

    错误现象: var div1=mycss[0].style.backgroundColor;  //这一行提示360和chrome提示:Uncaught TypeError: Cannot read  ...

  6. JavaScript Uncaught TypeError: Cannot read property 'value' of null

    用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...

  7. Uncaught TypeError: Cannot set property 'onclick' of null解决办法

    如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...

  8. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

  9. Uncaught TypeError: Cannot read property 'ownerDocument' of null

    /********************************************************************* * Uncaught TypeError: Cannot ...

随机推荐

  1. 第十章· Logstash深入-Logstash与Redis那点事

    Logstash将日志写入Redis 为什么要使用Redis 在企业中,日志规模的量级远远超出我们的想象,这就是为什么会有一家公司日志易专门做日志收集,给大型金融公司收集日志,比如银行,因为你有可能看 ...

  2. Kivy 简单尝试

    Kivy 简明教程 首先,有两个网址你不得不看: Kivy: Cross-platform Python Framework for NUI在官网逛逛,顺便看看最下面的代码,try to run it ...

  3. js基本事件

    1:单击事件 --onclick function test01(){ alert("js的单击事件"); } 2:双击事件--ondblclick function test02 ...

  4. C获取数组长度

    c语言中,定义数组后可以用sizeof命令获得数组的长度(可容纳元素个数) 如: { int data[4]; int length; length=sizeof(data)/sizeof(data[ ...

  5. DataTable To List<T> DataTable Linq学习笔记

    LINQ 查询适用于实现的数据源 IEnumerable<T>接口或System.Query.IQueryable接口. DataTable类默认是没有实现以上接口的. 所以要在DataT ...

  6. linux基础—课堂随笔_03 SHELL脚本编程基础

    shell脚本编程基础 条件选择:if语句 选择执行: 注意:if语句可嵌套 单分支 if(开头)判断条件:then条件为真的分支代码 fi(结尾) 双分支 if(开头)判断条件:then条件为真的分 ...

  7. Successor HDU - 4366 (预处理,线段树,dfs序)

    Successor HDU - 4366 Sean owns a company and he is the BOSS.The other Staff has one Superior.every s ...

  8. 【踩坑记录】 使用form标签的 reset() 方法报错原因及处理方法

    如果form标签内包含了 id 为 reset 的元素,在调用form的 reset() 方法时,会报xxx.reset is not a function,原因是在调用form的 reset() 方 ...

  9. BZOJ 1107: [POI2007]驾驶考试egz / Luogu P3463 [POI2007]EGZ-Driving Exam (树状数组 LIS)

    能从iii走到所有跑道 相当于 能从iii走到111和nnn. 边反向后就相当于 能从111和nnn走到iii. 为了方便叙述,把111~nnn叫做x坐标,111~(m+1)(m+1)(m+1)叫做y ...

  10. mongodb多条件分页查询的三种方法(转)

    一.使用limit和skip进行分页查询 public List<User> pageList(int pageNum ,int pageSize){ List<User> u ...