为什么我得到'Cannot read property 'addEventListener‘of null
"Cannot read property 'addEventListener' of null"是一个常见的JavaScript错误。它表示在尝试给一个值为null或undefined的对象添加事件监听器时出错。
这个错误通常发生在以下几种情况下：
- 未正确选择或找到要添加事件监听器的元素。
- 在DOM加载完成之前尝试访问DOM元素。
- 在动态创建的元素上尝试添加事件监听器，但元素尚未被添加到DOM中。
解决这个错误的方法取决于具体的情况。以下是一些常见的解决方法：
- 确保正确选择元素：使用合适的选择器或getElementById()等方法来选择要添加事件监听器的元素。可以通过在控制台中打印元素来验证是否成功选择了元素。
- 确保DOM加载完成：在尝试访问DOM元素之前，确保DOM已经完全加载。可以使用DOMContentLoaded事件或将脚本放在页面底部来确保脚本在DOM加载完成后执行。
- 动态创建元素时添加事件监听器：如果要在动态创建的元素上添加事件监听器，确保元素已经被添加到DOM中。可以在创建元素后立即添加事件监听器，或者在将元素添加到DOM之后再添加事件监听器。
总结： "Cannot read property 'addEventListener' of null"错误通常是由于选择错误的元素、DOM未加载完成或动态创建元素未添加到DOM中导致的。通过正确选择元素、确保DOM加载完成以及在正确的时机添加事件监听器，可以解决这个错误。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
2回答
我试图在每个跨度内创建跨度，并将拆分字符串作为字符附加。所以，根据下面的信息，就像<span>t</span><span>h</span>之类的.
由于某些原因，当我附加到文档体时，我会得到这个错误。为什么？
Uncaught TypeError: Cannot read property 'appendChild' of null
<!doctype html>
<html>
<head>
<script type="text/javascript">
浏览 0提问于2015-02-26得票数 0
回答已采纳
我在一个元素上附加了一个click事件侦听器，比如：
document.querySelector('.class-name').addEventListener('click', function () {
});
元素可以从服务器端生成，也可以不从服务器端生成。
因此，如果服务器生成了元素，那么一切都会正常工作，但如果不是这样，我就会得到如下错误：
Cannot read property 'addEventListener' of null
我知道为什么会发生这种情况，但我想知道是否有更好的方法将事件侦听器附加到不会生成此类错误的元素？
浏览 3提问于2014-07-18得票数 7
回答已采纳
每当我尝试使用document.body.appendChild时，它的计算结果都是null。下面是我的代码： document.body.appendChild(c92w46); 我得到了这个错误： main.js:96 Uncaught TypeError: Cannot read property 'appendChild' of null
浏览 34提问于2021-01-22得票数 0
回答已采纳
我正在尝试使用.getElementsByTagName()选择元素。
var tags = document.body.getElementsByTagName("*");
当前尝试使用从现有答案中吸取的经验教训
但是我的尝试失败了，我有这个错误：
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
它为什么会产生这个错误，我该如何修复它？
浏览 1提问于2014-04-24得票数 19
回答已采纳
我试着用一个eventListener做一个简单的按钮提交，但是它不起作用，你能排除它吗？这就是错误：
Uncaught TypeError: Cannot read property 'addEventListener' of null
这就是密码：
function getData() {
console.log('Hello World! ');
}
document.getElementById('submit').addEventListener('click', getData());
浏览 7提问于2021-02-21得票数 0
回答已采纳
1回答
在我用这个命令：npm install -g npm@latest做了一个新的npm更新之后，我用npm安装了新的软件包，以解决一个与在电子应用程序的npm install -g npm@latest中安装sqlite3有关的问题。
但是，当我尝试运行sqlite3：npm install sqlite3 --save或任何其他命令来安装一个新包之后，就会出现以下错误：
npm WARN tar zlib: Cannot read property 'length' of null
npm WARN tar zlib: Cannot read property 'len
浏览 1提问于2019-07-31得票数 1
回答已采纳
我使用的是Vue 2.6.10和vue-toasted 1.1.27。但是，我从浏览器那里得到了一个错误。为什么我不能安装vue-toasted？vue-toasted不支持Vue 2.6.10吗？
import Toasted from 'vue-toasted';
Vue.use(Toasted);
vue-toasted.min.js:1 Uncaught TypeError: Cannot read property 'appendChild' of null
at l (vue-toasted.min.js:1)
at new t (v
浏览 1提问于2019-07-24得票数 2
HTML：
<body>
<script src="dynamic.js"></script>
<nav>
<label id="logo">My Life</label>
<ul id="test">
<li>
<a href="#" id="change">Home</a>
</li>
<li>
<a hr
浏览 25提问于2020-02-16得票数 0
1回答
当我使用Cordova Inappbrowser ()时，我得到以下错误
TypeError: Cannot read property 'open' of undefined
$cordovaInAppBrowser.open(urlToGo, '_self', options)
.then(function(event) {
// success
console.log("Success...");
})
浏览 5提问于2016-05-25得票数 1
回答已采纳
我正在做一个HEX到RGB颜色转换器，我已经做了所有我认为你应该做的事情，这就是我的JS代码和HTML代码
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
浏览 1提问于2018-02-08得票数 1
回答已采纳
这里有一个for-循环，这让我非常困惑，因为它抛出了一个无法读取空的属性，尽管它是直接从循环中来的.
TypeError: Cannot read property 'eventManager' of null
HTMLDocument.eventManager
src/jsgame/game.js:30
27 |
28 | eventManager(event) {
29 | for (let key in this) {
> 30 | if (typeof this[key].eventManager === 'function
浏览 2提问于2021-05-24得票数 0
2回答
我不明白这是不是一个纯粹的javascript错误。在下面的类函数中，我添加了一个返回错误的eventListener：
Uncaught TypeError: Cannot read property 'call' of undefined
我想澄清的是，所有被调用的函数都被正确定义。
function OrbitController(v){
var that = this;
this.view = v;
this.controls = new THREE.OrbitControls(this.view.getCamera(),this.view.renderer.domEl
浏览 0提问于2015-03-24得票数 0
回答已采纳
在上次使用创建模式下的数据源的createItem函数进行更新之后，我有了一种奇怪的行为。我的数据源是mysql表。
我是从我的自定义创建函数以及自动生成的表单中获得它的：
Exception caught: Exception caught: 8 exceptions caught: (TypeError) : Cannot read property 'sb' of null; (TypeError) : Cannot read property 'sb' of null; (TypeError) : Cannot read property 'sb
浏览 0提问于2017-02-14得票数 0
回答已采纳
在运行ng update @angular/cli时，当我试图通过Angular 5项目升级到Angular 6时，我一直收到这个错误
Error: Cannot read property '1' of null
Cannot read property '1' of null
我完全遵循，但不确定为什么会发生这种情况。有没有人见过这个？
浏览 1提问于2018-05-11得票数 2
1回答
我有以下问题。我们已经得到了一个AngularJS应用程序，当我们在路由example.com/视频/:id时，它调用了我们编写的完全正确的API，我们得到的文件url是完全正确的。现在，我们当然想在VideoJS中显示这个视频。我们将JSON构造为字符串，如下所示：
var video_sources = '[{ type: "video/mp4", src: "http://example.com/'+data.data.filename+'-360.mp4" }';
video_sources=video_s
浏览 1提问于2015-03-03得票数 1
回答已采纳
我是一名安卓开发人员，也是JavaScript的新手。我正在使用javascript从我的活动中控制webview。在我的登录页面中，当我使用Java脚本函数时，我得到了一些巨大的错误。
代码：
web.loadUrl("javascript:document.getElementById(\"umail\").value = \""
+ email + "\";");
web.loadUrl("javascript:document.getElementById(\"password\")
浏览 0提问于2013-05-15得票数 1
回答已采纳
我这里有个密码：
document.getElementById('success').style.display("block");
document.getElementById('success').text("aaaa");
我得到了这个错误，为什么？
Uncaught TypeError: Cannot read property 'style' of null
<span id="success" style="color:#FFF; display:none;
浏览 9提问于2013-10-17得票数 4
回答已采纳
1回答
我试图在单击按钮(该按钮是在javascript中创建的)后删除它，并从另一篇文章中表示此代码可以工作，但在我的控制台中，我得到了错误：
Uncaught TypeError: Cannot read property 'remove' of null
at HTMLUnknownElement.<anonymous> (RBrOJeLwYgRM:335)
为什么？帮助!代码：
据说要删除元素的代码：
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
浏览 1提问于2017-02-24得票数 0
回答已采纳
1回答
describe('DropDown', () => {
let store: any;
let wrapper: any;
beforeEach(() => {
store = mockStore({
dropDown: {
...
},
});
wrapper = mount(
<Provider store={store}>
<DropDown />
</Provider>
);
});
i
浏览 1提问于2020-01-08得票数 2
回答已采纳
1回答
我的职能是：
// menuAnimate() adds/removes the classes for the mobile menu animation
export default function menuAnimate() {...}
我将其导入我的摩卡测试文件中，如下所示：
import { menuAnimate } from '../src/scripts/nav';
但是，当我运行涉及menuAnimate的测试时，我会得到一个错误--这个错误：
/Users/johnsoct/Dropbox/Development/andybeverlyschool/src
浏览 2提问于2017-08-31得票数 0
回答已采纳
<html>
<head>
<title>Dom Manipulation intro</title>
<!-- <link rel="stylesheet" href="domManStyle.css"> -->
</head>
<body>
<button id="press">Click me</button>
<p>No one has c
浏览 0提问于2020-06-05得票数 0
我在设置localStorage数据的页面上有Javascript：localStorage.setItem('blah', 1);
然后，我有代码，将重定向到另一个页面的按钮点击。
在另一个页面上，我尝试访问localStorage中的项目，但是我获得了30%的Uncaught TypeError: Cannot read property 'blah' of null。为什么localStorage每次都不存钱？
我是不是遗漏了什么？
当前页上的
localStorage.setItem('blah', 1);
$('.btn'
浏览 1提问于2014-09-08得票数 3
回答已采纳
我正在尝试使用javascript函数向html表添加一个标题。整个脚本相当大，所以我只包含了html片段，其中创建了html表，然后是向该表添加标题的函数。(当单击按钮时，将调用此函数)。然而，我得到了以下错误：
Locations.html:703 Uncaught TypeError: Cannot read property 'createTHead' of null
第703行对应于代码行"var hdr = tbs.createTHead();“。看起来好像这个函数找不到"myTable“表，并且当它通过id行(我想)..but运行getelemen
浏览 0提问于2017-05-27得票数 0
5回答
我的源代码可以通过以下URL访问：
我想问一下下面的编码：
<mat-error *ngIf="logRecipients.errors.required">
Appreciation Log Recipients is <strong>required</strong>
</mat-error>
<mat-error *ngIf="logRecipients.errors.logRecipientValidator">
Invalid email address
<
浏览 0提问于2020-01-02得票数 1
回答已采纳
我想从Hotjar获取userId，但我需要确保Hotjar已加载。我如何依赖一个函数来等待Hotjar loaded，比如使用.then()来等待promise。
<Hotjar Code>
.
.
.
<End of Hotjar Code>
let x = hj.globals.get('userId').split('-').shift()
现在我得到了错误TypeError: Cannot read property 'get' of undefined
浏览 25提问于2020-02-19得票数 1
如何在Android上隐藏“合金/钛”上的动作条。我尝试了以下几点：
$.index.activity.actionBar.hide()
但它只是抛出了一个错误：
Cannot read property 'hide' of undefined
完整的错误消息如下：
[ERROR] : TiExceptionHandler: (main) [1605,1605] ----- Titanium Javascript Runtime Error -----
[ERROR] : TiExceptionHandler: (main) [0,1605] - In /alloy/co
浏览 0提问于2017-03-16得票数 2
回答已采纳
我正在尝试在jekyll发布页面中实现android chrome的网络共享api。下面是我的代码。我的代码是_layout/post.html编写的。 <script>
document.querySelector('.share-btn2').addEventListener('click', function() {
console.log('clicked');
if(navigator.share) {
navigator.share({
title: '{{ pag
浏览 14提问于2018-12-31得票数 0
回答已采纳
如何解决错误cannot read property of 'addEventListener' of null？当我添加这段代码时，JS文件中的document.getElementById("myForm").addEventListener("submit", SaveBookmark)
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="
浏览 43提问于2018-03-02得票数 0
我从和他的中创建了一个基于离子的日历示例。
如果我在我的android设备上部署相同的示例，我总是得到错误：
谷歌浏览器控制台中的Uncaught TypeError: Cannot read property 'calendar' of undefined。和
错误是基于新版本的ngCordova还是其他相同的原因？
浏览 0提问于2015-11-17得票数 0
当我尝试在保存后从全日历中检索事件时，我在fullcalendar.min.js:6中得到了下面的错误。为什么我会得到这个错误？
Uncaught TypeError: Cannot read property 'format' of null
我使用事件作为json提要：
events: './scripts/events.php?user_id='+user_id,
浏览 4提问于2015-11-25得票数 2
尝试创建一个简单的计算器，这是我输入的代码。
<input type="button" value=" 1 " onClick="calculator.answer.value += '1'" />
问题是我得到了上面的错误。不确定可能是什么问题。下面是再次出现的错误。
Cannot read property 'value' of undefined
at HTMLInputElement.onclick
浏览 28提问于2018-07-16得票数 0
1回答
我最近完成了Ubuntu15.10的新安装。但是，预装的webbrowser应用程序的外观已经损坏。我发现这种风格没有加载，但是我自己解决不了这个问题。这就是在启动webbrowser应用程序时终端中出现的内容(因为我的语言是波兰语，您可能会发现，"Brakępu“类似于英语”拒绝访问“/”拒绝许可“等等)：
QInotifyFileSystemWatcherEngine::addPaths: inotify_add_watch failed: Brak dostępu
file:///usr/share/webbrowser-app/webbrowser/Browser.qml:64
浏览 0提问于2015-11-25得票数 0
回答已采纳
1回答
当我试图得到一个反应式变量值时，我得到了Uncaught TypeError: Cannot read property 'chapter' of null。我对Session做了完全相同的事情，并且它起作用了。所以我搞不清楚我到底出了什么问题。也许这个值是在错误的时间设置的？
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-v
浏览 0提问于2017-01-05得票数 0
回答已采纳
我正在研究js与DOM的交互，有几个问题。eloquentjs第14章中的代码似乎不起作用。为什么它会输出Cannot read property nodeType of null。
<!doctype html>
<html>
<head>
<title>My home page</title>
<script src="part1.js"></script>
</head>
<body>
<h1>My home page</h
浏览 24提问于2020-05-12得票数 0
1回答
无法对单个对象中的对象数组进行v
、、、、
我需要一些帮助在NuxtJS中使用v。
我有一个对象，它包含这样的标记对象列表：
{
"id": 5,
"title": "example",
"tags":[
{
"id":3,
"name":"a",
"description":null
},
{
"id":4,
"name":"b",
"description":null
浏览 1提问于2021-03-19得票数 0
回答已采纳
我在控制台Uncaught TypeError: Cannot read property 'addEventListener' of null中得到了这个错误，我正在使用Laravel5.7，这是我的@section()代码
@section('scripts')
<script type="text/javascript">
$(document).ready(function() {
function expandTextarea(id) {
doc
浏览 2提问于2018-10-23得票数 1
回答已采纳
1回答
我想在浏览器中从本地磁盘播放视频文件，所以我找到了这段代码。你能告诉我为什么不起作用吗？当我把它复制到项目中时，它就不能工作了。您还能告诉我是什么给出了像function name(x){variables}(window)这样的函数声明吗？
我得到的错误是Uncaught TypeError: Cannot read property 'addEventListener' of null
(谢谢你的帮助:)
<html>
<head>
<meta charset="UTF-8">
<meta name=
浏览 3提问于2014-06-19得票数 0
回答已采纳
以下是我的测试应用程序的代码：
TextAreaStyle{
id: loggerStyle
textColor: "#00ff88";
backgroundColor: "#000000";
}
TextArea {
id: taLog
readOnly: true
width: parent.width
height: parent.height - labelTitle.height - btnTest.height - 2*v_AIR
x: 0
y: labelTitle.heig
浏览 2提问于2016-09-12得票数 3
回答已采纳
我正在使用Web2Py向我的视图发送一个值列表。
我的HTML是这样的：
<select id="DestinationOptions" onchange="SetDest(this)">
{{for key, value in dirList.iteritems():}}
<option name="DirListItem{{=key}}" id="{{=key}}"> {{=value}}</option>
{{pass}}
</select>
浏览 0提问于2017-04-27得票数 2
所以我有一个非常奇怪错误:我想要检查用户在进入状态时是否正在登录，如果没有，则将他们重定向回SignIn页面。所以在我的配置中，我有：
.state('home', {
cache: false,
abstract: true,
url: "/home",
templateUrl: "app/home/home.html",
onEnter: function($state, MyFirebaseService) {
// check session
var userId = MyFirebaseS
浏览 1提问于2015-06-12得票数 0
1回答
我有一个遵循模块模式编写的javascript代码：
var controller = function () {
return {
init: function() {
// settings and initialization
}
makeUIactions: function() {
//set UI actions, for example callback function of a button:
document.getElementB
浏览 0提问于2015-03-09得票数 0
有人能解释吗？
Array.from(undefined);
// Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
Array.from(null);
// Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
Array.from('Break this up');
// ["B", &
浏览 0提问于2020-08-24得票数 3
回答已采纳
因此，使用JSPM构建我的angular2项目以便发布：jspm bundle-sfx app dist/main.sfx.js。一切都很好，直到我尝试在浏览器中加载构建的应用程序。这是我得到的错误：
EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver
ORIGINAL EXCEPTION: TypeError: Cannot read property 'animate&#
浏览 4提问于2016-06-21得票数 7
回答已采纳
1回答
我正在做一个chrome扩展，当按钮被按下时，我会得到当前的url和输入域中的值。
但是我得到了一个错误：
Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.myAlert
在这行中：
var ip = document.getElementById('ip_dns').value;
获取和存储此值的正确方法是什么？
下面是我的代码：
popup.html
<!doctype html>
<html>
<head>
浏览 1提问于2017-02-11得票数 0
回答已采纳
1回答
在分别单击第一个和第二个选项卡"Cannot set property '_DT_CellIndex‘of undefined“和"Cannot read property 'parentNode’of null”后，我得到以下错误 ? ? ? 这是TS代码 ? ?
浏览 52提问于2021-06-28得票数 0
我试图将事件绑定到一个由角2中的指令创建的“动态”元素，我的代码如下所示：
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input() defaultColor: string;
@Input('m
浏览 5提问于2017-05-02得票数 2
回答已采纳
我在网页上有一个按钮，检查如下：
<button type="button" class="odd-item-dropdown-confirm" data-qa="button-odd-item-dropdown-confirm">Confirm</button>
我想点击这个按钮，我试着：
function clickConfirm(){
var bntConfirm = document.querySelector('.btn.button-odd-item-dropdown-confirm');
浏览 4提问于2020-01-14得票数 3
回答已采纳
2回答
这是我下面的表格
<select name="catg" id="select">
<option> Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff"
浏览 1提问于2014-04-02得票数 0
1)为什么第一个按钮出现在DOM上，而不是第二个按钮
2)对于第二个按钮，我希望首先在DOM上显示问候语，然后向其中添加eventlistner。我怎样才能做到这一点？
var greeting = "hi"
var greetingSpace = document.getElementById('exampleTwo');
greetingSpace.innerHTML = greeting;
document.getElementById('SecondButton').addEventListener('click'
浏览 0提问于2018-07-10得票数 0
回答已采纳
我在我的扩展弹出窗口中有一个表单，其中包含以下代码：
<button type="submit" id="update" class="btn btn-primary">Submit</button>
然后在附加的脚本中，使用以下代码：
document.addEventListener("DOMContentLoaded", function(event){
var button = document.getElementById("update");
button.addEven
浏览 4提问于2018-12-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
