转行学开发，代码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. Python中文转为拼音
			
    # -*- coding: utf-8 -*-import sys def openTable(): f = open('gb-pinyin.table', 'r') table = f.read() ...
    
			
    2. 
						
  2. deep_learning_Function_tf.equal(tf.argmax(y, 1),tf.argmax(y_, 1))用法
			
    [Tensorflow] tf.equal(tf.argmax(y, 1),tf.argmax(y_, 1))用法 作用:输出正确的预测结果利用tf.argmax()按行求出真实值y_.预测值y最大值 ...
    
			
    3. 
						
  3. STM32 stm32fxxx_flash.icf文件的作用详解
			
    文章转载自:https://blog.csdn.net/weibo1230123/article/details/80142210 每个芯片开发商都会针对每款芯片来编写一个.icf文件就是传说中的链接 ...
    
			
    4. 
						
  4. 阿里云端安装mysql
			
    首先查看系统版本,是64位的centos7 file /sbin/init 安装指南如下 https://www.cnblogs.com/thinkingandworkinghard/p/671125 ...
    
			
    5. 
						
  5. Tomcat基础知识
			
    介绍Tomcat之前先介绍下Java相关的知识. 各常见组件: 1.服务器(server):Tomcat的一个实例,通常一个JVM只能包含一个Tomcat实例:因此,一台物理服务器上可以在启动多个JV ...
    
			
    6. 
						
  6. 解决tomcat控制台乱码+清除过期缓存条目后可用空间仍不足 - 请考虑增加缓存的最大空间问题
			
    一.乱码 1.打开Tomcat的目录,找到conf文件夹,一般修改server.xml中的编码集,改为utf-8即可 2.若server.xml中编码设置的就是utf-8,可以修改logging.pr ...
    
			
    7. 
						
  7. .NET Core 3时代！如何使用DevExpress WPF创建应用
			
    DevExpress广泛应用于ECM企业内容管理. 成本管控.进程监督.生产调度,在企业/政务信息化管理中占据一席重要之地.通过DevExpress WPF Controls,您能创建有着强大互动功能 ...
    
			
    8. 
						
  8. Gradle 配置国内镜像
			
    项目级配置 在项目中找到如下文件 打开,添加上阿里云镜像 maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}
    
			
    9. 
						
  9. thinkjs 安装笔记
			
    1.首先安装thinkjsnpm install -g thinkjs(-g是指全局安装)检查是否安装成功:thinkjs -v 2.创建项目进入项目目录,初始化项目:thinkjs new proj ...
    
			
    10. 
						
  10. Java-ConnectDB工具类
			
    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; /** * 功能描述: ...
    
			
    11.