转行学开发，代码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. telnet命令测试端口连接是否正常， telnet不是内部或外部命令的方案
			
    telnet ip地址 端口 1.点击开始 → 运行 → 输入CMD,回车.2.在DOS界面里,输入telnet测试端口命令:   telnet IP 端口  或  telnet 域名 端口,回车.  ...
    
			
    2. 
						
  2. storcli/percli的使用场景
			
    目录 storcli/percli常用场景 storcli/percli常用场景 查看帮助信息 storcli64 help 查看控制器数量 storcli64 show ctrlcount [roo ...
    
			
    3. 
						
  3. java-消息队列相关-activeMQ
			
    ,1,如何防止activeMQ崩溃导致消息丢失呢? 第一点,首先消息需要使用持久化消息,服务挂掉,重启服务后消息依然可以消费,不会丢失: 第二点,ActiveMQ采用主从模式搭建集群,比如搭建3台主从 ...
    
			
    4. 
						
  4. Python 学习第一天（二）python 入门
			
    1.第一个python程序 1.1 直接打印输出 打开cmd,输入python进入到python交互式环境:(看到>>>是在Python交互式环境下:) 在python交互环境下输入 ...
    
			
    5. 
						
  5. BZOJ1601 [Usaco2008 Oct]灌水[最小生成树]
			
    显然分析可知这个图最后连起来是一个森林,每棵树有一个根再算一个代价.那么这些跟需要连向某一点一个建立水库的代价,且根可以有多个但不能没有,则考虑用超级源点0向所有点连虚边,Prim跑MST即可保证有至 ...
    
			
    6. 
						
  6. 安装tensorflow遇到：Your CPU supports instructions that this TensorFlow binary was not compiled to use
			
    为了提升CPU计算速度的.若你有支持cuda的GPU,则可以忽略这个问题,因为安装SSE4.1, SSE4.2, AVX, AVX2, FMA, 仅仅提升CPU的运算速度(大概有3倍). 解决方法:  ...
    
			
    7. 
						
  7. Missing artifact com.sun.jmx:jmxri:jar:1.2.1的解决方法
			
    maven项目添加log4j-1.2.15依赖出现Missing artifact com.sun.jmx:jmxri:jar:1.2.1错误 解决方法一:修改log4j.jar的版本为1.2.16或 ...
    
			
    8. 
						
  8. 特征工程中的IV和WOE详解
			
    1.IV的用途 IV的全称是Information Value,中文意思是信息价值,或者信息量. 我们在用逻辑回归.决策树等模型方法构建分类模型时,经常需要对自变量进行筛选.比如我们有200个候选自变 ...
    
			
    9. 
						
  9. HDU 6033 - Add More Zero  |  2017 Multi-University Training Contest 1
			
    /* HDU 6033 - Add More Zero [ 简单公式 ] | 2017 Multi-University Training Contest 1 题意: 问 2^n-1 有几位 分析:  ...
    
			
    10. 
						
  10. yii框架学习（MVC）
			
    路由:两种方式,第一种是默认方式访问,假设配置了虚拟主机,那么localhost/web/index.php?r=admin/index    访问的是controllers目录下的admin控制器里 ...
    
			
    11.