js报错Uncaught TypeError: Cannot read property 'id' of null

2023-05-01 04:56:02JavaScript0184

js报错Uncaught TypeError: Cannot read property 'id' of null,第1张

意思就是某个元素没有id属性，但你又想通过id来获取这个元素，就出错了。火狐和谷歌在这的容错性有差异，所以一个报错、一个不报，但可以肯定错误肯定是存在的，具体情况要看过你的代码才知道，你至少也要把出错的那行代码贴出来啊，或者你自己通过开发者模式（F12键）来查错也行。

有三种类型的编程错误：(1)语法错误和(2)运行时错误(3)逻辑错误：

语法错误：

语法错误，也被称为解析错误，在编译时进行传统的编程语言，并出现在JavaScript解释时。

例如，下面一行将导致一个语法错误，因为它缺少一个右括号：

[js] view plaincopyprint?

<!--

window.print(

//-->

</script>

[js] view plaincopyprint?

<!--

window.print(

//-->

</script>

当一个语法错误在JavaScript中出现，只有在同一个线程中包含的语法错误的影响，在其他线程的代码被执行；代码依赖于包含错误的代码不会被执行。

运行时错误：

执行(编译/解释后)在运行时错误，也被称为异常，会引发。

例如，下面一行将导致运行时错误，因为这里的语法是正确的，但在运行时它正试图调用非存在的方法：

[js] view plaincopyprint?

<!--

window.printme()

//-->

</script>

[js] view plaincopyprint?

<!--

window.printme()

//-->

</script>

例外情况也影响到它们发生的线程，允许其他JavaScript线程继续正常执行。

逻辑错误：

逻辑错误可能是最困难的类型的错误跟踪。这些错误是不是一个语法或运行时错误的结果。相反，当发生一个错误的驱动脚本逻辑，你没有得到所期望的结果。

你可能无法抓到这些错误，因为这取决于程序是什么类型的逻辑是基于业务需求。

try...catch...finally 语句:

JavaScript的最新版本中添加的异常处理能力。JavaScript实现 try ... catch... finally结构以及抛出操作来处理异常。

你可以捕获程序员生成和运行时异常，但不能捕获JavaScript语法错误。

这里是 try...catch...finally 块语法：

[js] view plaincopyprint?

<!--

try {

// Code to run

[break]

} catch ( e ) {

// Code to run if an exception occurs

[break]

}[ finally {

// Code that is always executed regardless of

// an exception occurring

}]

//-->

</script>

try块必须后跟只有一个catch块或者一个finally块（或两者之一）。当一个异常在try块时，除被放置在e和catch块被执行。 try/catch语句后的可选finally块无条件地执行。

示例:

下面是一个例子，我们正试图调用一个不存在的函数，这将引发异常。让我们来看看它的行为，不具有try ... catch：

[js] view plaincopyprint?

<html>

<head>

<!--

function myFunc()

{

var a = 100

alert("Value of variable a is : " + a )

}

//-->

</script>

</head>

<body>

<p>Click the following to see the result:</p>

<form>

</form>

</body>

</html>

现在，让我们尝试使用 try ... catch 捕获这个异常，并显示一个用户友好的消息。也可以取消此消息，如果要隐藏从用户这个错误。

[js] view plaincopyprint?

<html>

<head>

<!--

function myFunc()

{

var a = 100

try {

alert("Value of variable a is : " + a )

} catch ( e ) {

alert("Error: " + e.description )

}

//-->

</script>

</head>

<body>

<p>Click the following to see the result:</p>

<form>

</form>

</body>

</html>

可以使用finally块将永远try/catch语句后，无条件地执行。下面是一个例子：

[js] view plaincopyprint

<html>

<head>

<!--

function myFunc()

{

var a = 100

try {

alert("Value of variable a is : " + a )

}catch ( e ) {

alert("Error: " + e.description )

}finally {

alert("Finally block will always execute!" )

}

//-->

</script>

</head>

<body>

<p>Click the following to see the result:</p>

<form>

</form>

</body>

</html>

throw 语句:

可以使用throw语句来提高你的内置异常或自定义异常。后来这些异常可以被捕获并可以采取适当的行动。

以下是表示throw语句的用法的例子。

[js] view plaincopyprint

<html>

<head>

<!--

function myFunc()

{

var a = 100

var b = 0

try{

if ( b == 0 ){

throw( "Divide by zero error." )

}else{

var c = a / b

}

}catch ( e ) {

alert("Error: " + e )

}

//-->

</script>

</head>

<body>

<p>Click the following to see the result:</p>

<form>

</form>

</body>

</html>

您可以使用字符串，整数，布尔或对象在一个函数抛出一个异常，那么可以捕捉例外在相同的函数，我们在上面做了，或者使用try ... catch块在其他的函数。

onerror() 语法

onerror事件处理程序是第一个特点，方便JavaScript处理错误。错误事件被触发窗口对象，每当一个异常页面上出现。例如：

[js] view plaincopyprint

<html>

<head>

<!--

window.onerror = function () {

alert("An error occurred.")

}

//-->

</script>

</head>

<body>

<p>Click the following to see the result:</p>

<form>

</form>

</body>

</html>

onerror事件处理程序提供了三条信息，以找出错误的确切性质：

错误消息 . 浏览器将显示给定的错误相同的消息

URL . 在发生错误的文件

行号. 在导致错误的URL给出的行号

这里是例子来说明如何提取此信息

[js] view plaincopyprint

<html>

<head>

<!--

window.onerror = function (msg, url, line) {

alert("Message : " + msg )

alert("url : " + url )

alert("Line number : " + line )

}

//-->

</script>

</head>

<body>

<p>Click the following to see the result:</p>

<form>

</form>

</body>

</html>

可以显示在任何方式，你觉得这是更好的提取信息。

可以使用onError方法来显示错误消息的情况下没有在如下加载图像的任何问题：

[js] view plaincopyprint?

<img src="myimage.gif"

οnerrοr="alert('An error occurred loading the image.')" />

[js] view plaincopyprint

<img src="myimage.gif"

οnerrοr="alert('An error occurred loading the image.')" />

可以使用的onerror许多HTML标记错误的情况下显示相应的信息。

详解1000+项目数据分析出来的10大JavaScript错误

10个用Console来Debug的高级技巧

有浏览器的地方就有Fundebug

Debug前端HTML/CSS

转载于:https://www.cnblogs.com/curationFE/p/handle_javascript_exception.html

相关资源：javascript容错处理代码(屏蔽js错误)_js容错处理-其它代码类资源...

原文链接：http://www.cnblogs.com/curationFE/p/handle_javascript_exception.html

点击阅读全文

打开CSDN，阅读体验更佳

Vue.js中filterBy过滤器导致网页直接白屏_执笔看墨花开的博客-CSDN博 ...

一用这个方法就白屏,也没有报错,后来进vue官网一查才知道,filterBy被替换了以前是这样的写法: <pv-for="user in users | filterBy searchQuery in 'name'">{{user.name}} 1 最新的方法:在 computed 属性中使用 js 内置方法....

继续访问

vue打包js报错问题(低版本浏览器白屏)_十梦她九的博客

在config中的webpack.base.conf.js中,修改编译配置 entry:{ app:['babel-polyfill','./src/main.js'] } 可解决开发时低版本浏览器js报错问题方案3 使用组件问题可能使用的组件存在问题导致打包后报错 npm update npm run build...

继续访问

mvc条码打印（使用window.print打印条码）实例

mvc条码打印（使用window.print打印条码）实例代码： @{ Layout = "~/Views/Shared/_Layout.cshtml"var types = ViewData["types"].ToString().Trim()} <script src="@Url.Content("~/Areas/Area/AreaScripts/PrinterInWarehouse.js")" type="text/javascript"></script

继续访问

javascript中的contains方法

在研究一个多级菜单联动的js时，发现contains方法，以前没有碰到过，不知何意，然后在@司徒正美的博客发现有详细介绍，暂且摘录在此。 IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。不过火狐支持compareDocumentPosition(...

继续访问

vue框架开发出现页面空白、白屏的解决方法总汇_晶晶晶晶晶的博客-CSDN...

最后build/webpack.base.conf.js 文件中配置如下: module.exports= { entry: { app: ["babel-polyfill","./src/main.js"] } }6.Vue只在iOS 10出现白屏问题 a:出现变量定义两次的错误描述,如下: SyntaxError:Cannotdeclareale...

继续访问

vue页面白屏的原因及优化_尼克_张的博客_vue 刷新页面白屏

一、原因:单页面应用的 html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js vendor.js),所以当网速差的时候会产生一定程度的白屏二、解决办法:(1)优化 webpack 减少模块打包体积,code-split 按需加载(2)服务端渲染,在服务端...

继续访问

网页打印javascript:window.print()

在做B/S项目开发时。难免会遇到网页打印问题！可以用css控制， @media print .a {display:block} .b {display:hidden} 好像是这样。把你不想打印的部分class设为b 首先在网页中添加： VIEWASTEXT>然后就可以依次加入功能按钮了：将这两块东西放到就不会打印这些按钮了。当然要定义no

继续访问

window.print() 前端实现网页打印详解

转载： window.print() 前端实现网页打印详解_越努力，越幸运！-CSDN博客_window.print

继续访问

前端白屏出现的原因及一些解决方式_HuaHua·Li的博客

前端导致白屏的原因: JS问题常用框架Vue React Angular都是依靠JS进行驱动, 并且单页面的应用html也是依靠JS生成,在渲染页面的时候需要加载很大的JS文件( app.js 和vendor.js ),在JS解析加载完成之前无法展示页面,从而导致了白屏(当网...

继续访问

Vue.js项目在IE11白屏报错_光脚丫思考的博客_ie11打开...

在vue.config.js里添加如下代码: configureWebpack:config=>{ config.entry.app= ['babel-polyfill','./src/main.js']}, (四)sockjs-client 还有一种情况是在i.e.打开报错显示的sockjs-client错误,如下所示: ...

继续访问

js常用方法（。。。。不完整）

lastIndexOf()substring()split()slice()splice()var s="http://www.baidu.com"var i= s.lastIndexOf(".")//16 var unit= s.substring(i)//.com var url= s.substring(0,i)//http://www.baidu ...

继续访问

详解JavaScript中的异常处理方法

当一个语法错误在JavaScript中出现，只有在同一个线程中包含的语法错误的影响，在其他线程的代码被执行；代码依赖于包含错误的代码不会被执行。运行时错误：执行(编译/解释后)在运行时错误，也被称为异常，会引发...

JavaScript 异常处理详解

主要介绍了JavaScript 异常处理详解,需要的朋友可以参考下

javascript异常处理实现原理详解

主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

最新发布 JavaScript异常处理

JavaScript异常处理一：异常处理【错误类型】 Error（错误）表示系统级的错误和程序不必处理的异常，是 JavaScript 运行环境中的内部错误或者硬件问题，比如，内存资源不足等。对于这种错误，程序基本无能为力，除了退出运行外别无选择。系统错误程序错误用户错用【异常】所谓异常，表示需要捕捉或者需要程序进行处理的地方，它处理的是因为程序设计的瑕疵而引起的问题或者在外的输入等引起的一般性问题，是程序必须处理的。【error对象】创建错误 let err = new Erro

继续访问

JavaScript代码异常监控实现过程详解

JavaScript异常一般有两方面：语法错误和运行时错误。两种错误的捕获和处理方式不同，从而影响具体的方案选型。通常来说，处理JS异常的方案有两种：try…catch捕获和 [removed]捕获。以下就两种方案分别分析各自的...

webview加载页面，JS方法不能加载的问题解决

今天发现在webview，没有办法加载JS方法，跳不出那种提示框，就是写了webview.getSettings().setJavaScriptEnabled(true)这一句也完全没用。后来发现网上说的解决方案是用要用到WebChromeClient ，并且重写它里面的几个方法才行。 MyWebChromeClient.java package com.example.webview

继续访问

IE与firefox对CSS解析的差异说明

<以下摘自：草堂学社，原文路径：http://www.cm1314.cn/Article/site/ht/200704/16698.html>列举了一些常见，新手经常问的问题。举例并说明解决方法。(内容在下面对应)1.超链接访问过后hover样式就不出现的问题2.FF下如何使连续长字段自动换行3.ff下为什么父容器的高度不能自适应4. IE6的双倍边距BUG5. IE6下绝对...

继续访问

javascript错误处理方式有哪些

今天给大家分享的这篇javascript教程不是很适合初学者观看，对此不熟悉的朋友建议先看看基础的知识点。本文主要讲述java中的出错处理，也会涉及到javascript异常处理使用的正反列，以及ajax的异步处理。 Java的事件驱动机制让Java更加丰富，浏览器好比就是一个事件驱动的机器，错误也是一种事件。当一个错误发生时，一个事件就在某个点抛出。理论上，有人会说错误是Java中的简单

继续访问

Javascript异常处理机制详解

在ES3之前js代码执行的过程中，一旦出现错误，整个js代码都会停止执行，这样就显的代码非常的不健壮。在Java或C#等一些高级语言中，都提供了异常处理机制，可以处理出现的异常，而不会停止整个应用程序。从ES3开始，js也提供了类似的异常处理机制，从而让js代码变的更健壮，及时执行的过程中出现了异常，也可以让程序具有了一部分的异常恢复能力。一、Javascrip

继续访问

【JavaScript源代码】Angular处理未可知异常错误的方法详解.docx

Angular处理未可知异常错误的方法详解　代码写得再好，始终都无法完整的处理所有可能产生异常，特别是生产环境中的应用，很大一部分是数据来自用户、远程，很难保证所有数据都按程序规定的产生。事实上，除非测试...

JavaScript错误处理操作实例详解

良好的错误处理机制可以让用户得到及时的提醒，所以让我们来看看 JavaScript 提供了哪些针对错误处理的工具和方法吧O(∩_∩)O~ 1 try-catch 语句 ECMA-262 第 3 版引入了 try-catch 语句，这时 JavaScript 处理异常...

热门推荐 Javascript异常(exception)处理机制详解 JS、异常Error属性

继续访问

JS高级调试技巧：捕获和分析 JavaScript Error详解

前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error()，浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息

JavaScript错误处理机制详解

从ES3开始，js也提供了类似的异常处理机制，从而让js代码变的更健壮，即使执行的过程中出现了异常，也可以让程序具有了一定的异常恢复能力。

继续访问