用 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的更多相关文章

  1. JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...

  2. day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...

  3. Uncaught TypeError: Cannot set property 'onclick' of null解决办法

    如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...

  4. Uncaught TypeError: Cannot read property 'addEventListener' of null

    <script type="text/javascript"> var body1=document.getElementById('#body') </scri ...

  5. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

  6. Uncaught TypeError: Cannot set property 'innerHTML' of null

    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...

  7. Three.js three.js Uncaught TypeError: Cannot read property 'getExtension' of null

    在调试Three.js执行加载幕布的时候,突然爆出这个错误three.js Uncaught TypeError: Cannot read property 'getExtension' of nul ...

  8. 前台报错:Uncaught TypeError: Cannot read property '0' of null

    错误现象: var div1=mycss[0].style.backgroundColor;  //这一行提示360和chrome提示:Uncaught TypeError: Cannot read  ...

  9. 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null

    今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...

随机推荐

  1. java代码之美（10）---Java8 Map中的computeIfAbsent方法

    Map中的computeIfAbsent方法 Map接口的实现类如HashMap,ConcurrentHashMap,HashTable等继承了此方法,通过此方法可以在特定需求下,让你的代码更加简洁. ...

  2. qt 多语化

        最近项目使用的qt版本升级,导致了界面乱码问题,因此最后决定利用qt的多语化机制,来解决乱码问题,首先感谢这两篇文字的帮助,在此加上作者链接:Qt之多语化和Qt多国语言的实现与切换(国际化) ...

  3. 『Kruscal重构树 Exkruscal』

    新增一道例题及讲解 Exkruscal \(Exkruscal\)又称\(Kruscal\)重构树,是一种利用经典算法\(Kruscal\)来实现的构造算法,可以将一张无向图重构为一棵具有\(2n-1 ...

  4. .net core在Ocelot网关中统一配置Swagger

    最近在做微服务的时候,由于我们是采用前后端分离来开发的,提供给前端的直接是Swagger,如果Swagger分布在各个API中,前端查看Swagger的时候非常不便,因此,我们试着将Swagger集中 ...

  5. SpringBoot入门教程(二十)Swagger2-自动生成RESTful规范API文档

    Swagger2 方式,一定会让你有不一样的开发体验:功能丰富 :支持多种注解,自动生成接口文档界面,支持在界面测试API接口功能:及时更新 :开发过程中花一点写注释的时间,就可以及时的更新API文档 ...

  6. SB！SB！SB！

    Topic Link http://ctf5.shiyanbar.com/stega/ste.png SB!SB!SB! 其实很简单,可别真的变成 SB! 1)根据链接提示,直接用stegsolve ...

  7. Nginx的负载均衡

    什么是负载均衡 负载均衡主要通过专门的硬件设备或者通过软件算法实现.通过硬件设备实现的负载均衡效果好.效率高.性能稳定,但是成本比较高.通过软件实现的负载均衡主要依赖于均衡算法的选择和程序的健壮性.均 ...

  8. mpvue微信小程序多列选择器用法：实现省份城市选择

    前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...

  9. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（6）- Bootable image格式与加载(elftosb/.bd)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Bootable image格式与加载过程. 在i.MXRT启动系列第三篇文章 Serial Down ...

  10. Python3+Selenium2完整的自动化测试实现之旅（四）：Selenium-webdriver操作浏览器、Cookie、鼠标键盘、警示框、设置等待时间、多窗口切换

    本篇学习总结webdriver模块操作浏览器.Cookie.鼠标键盘.警示框.设置等待时间.多窗口切换等方法的使用 1    浏览器控制 Selenium-webdriverAPI提供了对页面元素定位 ...