转行学开发，代码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. XDCTF2014 Writeup
			
    Web50 猜谜语类题目?FLAG在图片中有一些字符的 ASCii值,拼起来就是FLAG. Web100 隐写术.使用工具 StegSolve,把任一颜色的bit0拼起来图片的最开始部分即为  fla ...
    
			
    2. 
						
  2. 小程序UI设计（10）-巧用模板，事半功倍
			
    工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成 ...
    
			
    3. 
						
  3. IDA 头像是谁
			
    IDA图标上的女子:Ada Lovelace Ada Lovelace 简介: 阿达·奥古斯塔,19世纪诗人拜伦的女儿,数学家.穿孔机程序创始人,建立了循环和子程序概念.为计算程序拟定“算法”,写作的 ...
    
			
    4. 
						
  4. QOpenGLWidget
			
    QOpenGLWidget描述 QOpenGLWidget类是用于渲染OpenGL图形. 除了可以选择使用QPainter和标准的OpenGL渲染图形,QOpenGLWidget类提供了在Qt应用程序 ...
    
			
    5. 
						
  5. Mybatis映射文件中数据库表列名称和POJO成员域的联系
			
    下面是Mybatis的SQL映射文件. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ma ...
    
			
    6. 
						
  6. Myeclipse中左边的项目目录没了
			
    切换一下Perspective, java, resource都有项目窗口 具体的 Window->Open Perspective 如果项目窗口被关了的话 windows->show v ...
    
			
    7. 
						
  7. countif函数
			
    EXCEL单元格内数据主要有以下几类:数值型,文本型,逻辑型,错误值型.其中时间类型也是一种特殊的数值.文本类型的数字是文本型. 空单元格:指什么内容也没有的单元格,姑且称之为真空. 假空单元格:指0 ...
    
			
    8. 
						
  8. Android 中WebView中video视频自动播放
			
    转载于https://juejin.im/post/5d5ac7eb51882562744fae37 如果有使用过Android的WebView 播放视频的伙伴们一定会发现, 在点开视频网页的时候并没 ...
    
			
    9. 
						
  9. Error from server (ServiceUnavailable): the server is currently unable to handle the request
			
    grep image /root/kubernetes-metrics-server/kubernetes-metrics-server/metrics-server-deployment.yaml  ...
    
			
    10. 
						
  10. HTML的多媒体属性
			
    ㈠什么是多媒体? 多媒体来自多种不同的格式.它可以是听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等. Web 上的多媒体指的是音效.音乐.视频和动画. 确定媒体类型的最常用的方法是 ...
    
			
    11.