转行学开发，代码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. datePicker 及 timePicker Diolage弹出对话框式 比较好看的 监听事件
			
    DatePickerDialog 的监听 new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() { @Override ...
    
			
    2. 
						
  2. XML刚学会，怎么又出来个YAML！
			
    XML(eXtensible Markup Language)可扩展标记语言,曾经是IT软件开发界,标记数据.定义数据的大哥大. 很多从事Spring的同学,没少花时间在写XML文件上吧? 不过随着时 ...
    
			
    3. 
						
  3. libusb_submit_transfer 异步通信libusb
			
    https://bbs.csdn.net/topics/391012708?list=lz
    
			
    4. 
						
  4. Liux  chmod 给文件夹赋权限
			
    777 最高权限 给文件夹及子文件夹赋权限 chmod -R 777 * 给单独文件赋权限 chmod -R 777 ./startup.sh
    
			
    5. 
						
  5. linux高级技巧：heartbeat+lvs
			
    linux高级技巧:heartbeat+lvs   Heartbeat 项目是 Linux-HA 工程的一个组成部分,它实现了一个高可用集群系统.心跳服务和集群通信是高可用集群的两个关键组件,在 He ...
    
			
    6. 
						
  6. Python3-json3csv
			
    import json import csv json_str = '[{"a":1,"b":"2","c":" ...
    
			
    7. 
						
  7. BZOJ 1692: [Usaco2007 Dec]队列变换 (后缀数组/二分+Hash)
			
    跟BZOJ 4278: [ONTAK2015]Tasowanie一模一样 SA的做法就是把原串倒过来接在原串后面,O(nlogn)O(nlogn)O(nlogn)做后缀数组,就能O(1)O(1)O(1 ...
    
			
    8. 
						
  8. Python GUI编程(Tkinter)Ⅱ
			
    Tkinter 组件 Tkinter的提供各种控件,如按钮,标签和文本框,一个GUI应用程序中使用.这些控件通常被称为控件或者部件. 目前有15种Tkinter的部件.我们提出这些部件以及一个简短的介 ...
    
			
    9. 
						
  9. CCPC－Wannafly & Comet OJ 夏季欢乐赛（2019）E
			
    题面 这个题暴好啊,考了很多东西. 首先设f(x)为离终点还有x步要走的期望步数,我们可以发现 : 1.x>=k时,x可以转移到的点的下标都<x. 2.x<k时,则可能走回到x或者下 ...
    
			
    10. 
						
  10. angularJS限制 input-text 只能输入数字
			
    最初的目的是为了让输入的字段仅为数字,不要包含英文,理所当然想到了正则表达,比起对每一个字符判断ASCII码要方便的多 JS正则表达式的使用,可以参考正则表达式 以match为例,全局匹配非数字 va ...
    
			
    11.