转行学开发，代码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. （备忘）Nginx中文手册（技术指南第二版）
			
    Nginx 常见应用技术指南[Nginx Tips] 第二版 目 录 一. Nginx 基础知识二. Nginx 安装及调试三. Nginx Rewrite四. Nginx Redirect五. Ng ...
    
			
    2. 
						
  2. Centos7 更改网卡名称
			
    cd /etc/sysconfig/network-scripts/ 将要改名的网卡配置文件重命名,例如 mv ifcfg-eth1 ifcfg-eth0 vim ifcfg-eth0 修改devic ...
    
			
    3. 
						
  3. JavaScript对象原型
			
    一.MDN上的解释(有点抽象) 基于原型的语言? JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模 ...
    
			
    4. 
						
  4. linux 安装weblogic(转载)
			
    整个过程大同小异,不再笔记,就摘了网上的一篇. 原文地址:http://www.cnblogs.com/walk-the-Line/p/5409094.html 一.安装weblogic10.3.6  ...
    
			
    5. 
						
  5. C# 各个版本特征
			
    历史版本 C#作为微软2000年以后.NET平台开发的当家语言,发展至今具有17年的历史,语言本身具有丰富的特性,微软对其更新支持也十分支持.微软将C#提交给标准组织ECMA,C# 5.0目前是ECM ...
    
			
    6. 
						
  6. 喜大普奔！.NET界面控件DevExpress v19.2发布，快来下载体验
			
    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...
    
			
    7. 
						
  7. hadoop fs –stat 命令
			
    当向HDFS上写文件时,可以通过设置dfs.blocksize配置项来设置文件的block size,这导致HDFS上不同文件的block size是不同的.有时候我们需要知道HDFS上某个文件的bl ...
    
			
    8. 
						
  8. jquery resize()方法 语法
			
    jquery resize()方法 语法 作用:当调整浏览器窗口的大小时,发生 resize 事件.resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数.大理石 ...
    
			
    9. 
						
  9. rander()函数执行条件
			
    调用this.setState({}),如果数据改变了,rander()就行执行
    
			
    10. 
						
  10. HDU 5884 Sort  ——（K叉哈夫曼树）
			
    这题真心比较奥义,先见这个人的博客:http://blog.csdn.net/libin66/article/details/52565484 补0的方法是使得其满足成为满K叉树,而其博客中所说的“所 ...
    
			
    11.