转行学开发，代码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. 【wifi移植 1】 ap6210 wifi模块移植
			
    1. 编译wifi相关功能为模块,生成bcmdhd.ko:由bcmdhd.ko的模块信息可知,该模块依赖于cfg80211.ko和rfkill.ko. 2. 写脚本,开机自动加载wifi模块. 3.  ...
    
			
    2. 
						
  2. nginx的反向代理的优势，特点于原理(一)
			
    说到反向代理,首先先说一下反向代理的概念 反向代理(Reverse Proxy)方式是指以代理服务器来接受客户端的连接请求,然后将请求转发给网络上的web服务器(可能是apache,nginx,tom ...
    
			
    3. 
						
  3. 数据总线&地址总线&控制总线
			
    数据总线 (1) 是CPU与内存或其他器件之间的数据传送的通道. (2)数据总线的宽度决定了CPU和外界的数据传送速度. (3)每条传输线一次只能传输1位二进制数据.eg: 8根数据线一次可传送一个8 ...
    
			
    4. 
						
  4. 执行sudo pip3 ...报错 Traceback (most recent call last):   File "/usr/bin/pip3", line 9, in <module>     from pip import main ImportError: cannot import name 'main'
			
    对于普通pip,把pip3改成pip即可,其他的修改一样 1.执行命令 sudo gedit /usr/bin/pip3 2.改成下面的形式 from pip import __main__ # 需要 ...
    
			
    5. 
						
  5. 【2017中国大学生程序设计竞赛-哈尔滨站】B - K-th Number
			
    原题: 题意: 给你一个长度为N的正整数组A,对于这个数组的所有子区间,若长度小于k则不管它,若长度大于等于k则取第k大放入数组B 问你B中第M大的数是谁 一眼序列分治,然而没思路 数据结构?能想到从 ...
    
			
    6. 
						
  6. python+Appium自动化：运行第一个appium脚本
			
    用pycharm工具进行编写,运行一个开启淘宝app实例 from appium import webdriver desired_caps = { "platformName": ...
    
			
    7. 
						
  7. java合并数组的几种方法，stream流合并数组
			
    一.实例代码 package cc.ash; import org.apache.commons.lang3.ArrayUtils; import java.lang.reflect.Array; i ...
    
			
    8. 
						
  8. CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子
			
    怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
    
			
    9. 
						
  9. Spring 事务相关
			
    事务类型 数据库事务类型有本地事务和分布式事务: 本地事务:就是普通事务,能保证单台数据库上的操作的ACID,被限定在一台数据库上: 分布式事务:涉及两个或多个数据库源的事务,即跨越多台同类或异类数据 ...
    
			
    10. 
						
  10. Centos 7 安装 Xilinx SDSoC Development Environment
			
    1.CentOS版本信息 $ cat /etc/redhat-releaseCentOS Linux release 7.6.1810 (Core) 2.SDSoC下载地址: https://www. ...
    
			
    11.