JavaScript Uncaught TypeError: Cannot read property 'value' of null
用 JavaScript 操作 DOM 时出现如下错误：
Uncaught TypeError: Cannot set property 'value' of null
Uncaught TypeError: Cannot read property 'id' of undefined
例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var div = document.getElementById("测试1");
alert(div.id);
alert(div.className);
alert(div.title);
</script>
<title>测试</title>
</head>
<body>
<div id="测试1" class="测试2" title="测试3">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
运行时出现如下错误：
问题出在 JS 运行的时候你的页面还没有加载完成，所以你的 JS 代码找不到你的页面元素，就会抛出这个问题。解决办法就是把 JavaScript 代码放在 body 的最后，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
</head>
<body>
<div id="测试1" class="测试2" title="测试3">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<script>
var div = document.getElementById("测试1");
alert(div.id);
alert(div.className);
alert(div.title);
</script>
</body>
</html>
JavaScript Uncaught TypeError: Cannot read property 'value' of null的更多相关文章
- JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...
- day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...
- Uncaught TypeError: Cannot set property 'onclick' of null解决办法
如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...
- Uncaught TypeError: Cannot read property 'addEventListener' of null
<script type="text/javascript"> var body1=document.getElementById('#body') </scri ...
- Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
- Uncaught TypeError: Cannot set property 'innerHTML' of null
学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...
- Three.js three.js Uncaught TypeError: Cannot read property 'getExtension' of null
在调试Three.js执行加载幕布的时候,突然爆出这个错误three.js Uncaught TypeError: Cannot read property 'getExtension' of nul ...
- 前台报错:Uncaught TypeError: Cannot read property '0' of null
错误现象: var div1=mycss[0].style.backgroundColor; //这一行提示360和chrome提示:Uncaught TypeError: Cannot read ...
- 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null
今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...
随机推荐
- Java 多线程（一）—— 概念的引入
并发和并行 并行:指两个或多个时间在同一时刻发生(同时发生): 并发:指两个或多个事件在一个时间段内发生. 在操作系统中,安装了多个程序,并发指的是在一段时间内宏观上有多个程序同时运行,这在单 C ...
- 近期编程总结（i think -1）
随着“四则运算题”的不断升级,功能实现起来越来越难,需要的知识也越来越多.实现过程中,需要不断地查阅相关资料和与其他人讨论的实现方法. 四则运算2的产生,的确耗费了自己很多的精力,不过反思一下,在不断 ...
- [开源]快速构建一个WebApi项目
项目代码:MasterChief.DotNet.ProjectTemplate.WebApi 示例代码:https://github.com/YanZhiwei/MasterChief.Project ...
- 阿里云Ubuntu安装图形界面与中文语言包
图形界面: http://blog.csdn.net/qq_37608398/article/details/78155568?locationNum=9&fps=1 安装中文: http:/ ...
- ansible学习系列2-ansible常用模块使用
1. 查看支持的模块 [root@localhost ~]# ansible-doc -l 这里我们看下ansible的支持的模块个数 [root@localhost ~]# ansible-doc ...
- 设计模式总结篇系列：策略模式（Strategy）
前面的博文中分别介绍了Java设计模式中的创建型模式和结构型模式.从本文开始,将分别介绍设计模式中的第三大类,行为型模式.首先我们了解下分为此三大类的依据. 创建型模式:主要侧重于对象的创建过程: 结 ...
- Shell从入门到精通进阶之二:Shell字符串处理之${}
上一章节讲解了为什么用${}引用变量,${}还有一个重要的功能,就是文本处理,单行文本基本上可以满足你所有需求. 2.1 获取字符串长度 # VAR='hello world!' # echo $VA ...
- JS输入框去除负号（限定输入正数）
onkeyup="(this.v=function(){this.value=this.value.replace(/\-/g,\'\');}).call(this)" 示例: & ...
- 【转】三个案例带你看懂LayoutInflater中inflate方法两个参数和三个参数的区别
关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个 ...
- Spring Cloud Alibaba Nacos 入门
概览 阿里巴巴在2018年7月份发布Nacos, Nacos是一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台.并表示在6-8个月完成到生产可用的0.8版本,目前版本是0.9版本. Na ...