转行学开发，代码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. 
								
  2. Uncaught TypeError: Cannot set property 'innerHTML' of null
		
    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...
    
		
    3. 
						
  3. Uncaught TypeError: Cannot read property 'length' of null错误怎么处理？
		
    Uncaught TypeError: Cannot read property 'length' of null 错误怎么处理? 1.可能是返回的datagrid数据格式有问题,比如{"t ...
    
		
    4. 
						
  4. （转）Uncaught TypeError: Cannot set property 'innerHTML' of null
		
    (转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...
    
		
    5. 
						
  5. 前台报错:Uncaught TypeError: Cannot read property '0' of null
		
    错误现象: var div1=mycss[0].style.backgroundColor;  //这一行提示360和chrome提示:Uncaught TypeError: Cannot read  ...
    
		
    6. 
						
  6. JavaScript Uncaught TypeError: Cannot read property 'value' of null
		
    用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...
    
		
    7. 
						
  7. Uncaught TypeError: Cannot set property 'onclick' of null解决办法
		
    如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...
    
		
    8. 
						
  8. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
		
    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
    
		
    9. 
						
  9. Uncaught TypeError: Cannot read property 'ownerDocument' of null
		
    /********************************************************************* * Uncaught TypeError: Cannot  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. vue 设置全局变量、指定请求的 baseurl
			
    一. 基本环境前端vue:2.5.6axios:0.18使用vue脚手架构建项目.参照:webstorm搭建vue项目后台ssm框架前后端数据采用json格式传输二. 前端配置axios配置1.安装: ...
    
			
    2. 
						
  2. MyBatis-02-第一个Mybatis程序
			
    2.第一个Mybatis程序 思路:搭建环境-->导入Mybatis-->编写代码-->测试! 2.1.搭建环境 搭建数据库 CREATE DATABASE `mybatis`; u ...
    
			
    3. 
						
  3. 第一天Beta冲刺
			
    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <做个一亿的小项目> 这个作业的目标 完成第一天Beta冲刺 作业正文 .. ...
    
			
    4. 
						
  4. 手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]
			
    写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目 ...
    
			
    5. 
						
  5. 关于上部盒子里有图片下面盒子magin-top负值的层级问题
			
    .box{ width: 800px; box-sizing: border-box; margin: 50px auto 0; background: pink; } .imgBox{ width: ...
    
			
    6. 
						
  6. pipeline和baseline是什么？
			
    昨天和刚来项目的机器学习小白解释了一边什么baseline 和pipeline,今天在这里总结一下什么是baseline和pipeline. 1.pipeline 1.1 从管道符到pipeline  ...
    
			
    7. 
						
  7. redis主从配置及其java的调用（转）
			
    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/gsying1474/article/de ...
    
			
    8. 
						
  8. hdu 6052 To my boyfriend
			
    题目 OvO click here http://acm.hdu.edu.cn/showproblem.php?pid=6052 (2017 Multi-University Training Con ...
    
			
    9. 
						
  9. node的http与前端交互示例（入门）
			
    一.目录(node_modules是npm install后新增的) node 和 npm 版本 npm install http 二.node下的index.js var http = requir ...
    
			
    10. 
						
  10. 31. ClustrixDB 分布式架构/查询优化器
			
    ClustrixDB查询优化器有何不同 ClustrixDB查询优化器的核心是能够执行一个具有最大并行性的查询和多个具有最大并发性的并发查询.这是通过分布式查询规划器和编译器以及分布式无共享执行引擎实 ...
    
			
    11.