js 未捕获的 TypeError：无法读取 null 的属性“addEventListener”
Posted
技术标签:
【中文标题】js 未捕获的 TypeError：无法读取 null 的属性“addEventListener”【英文标题】：js uncaught TypeError : Cannot read property 'addEventListener' of null 【发布时间】：2021-04-02 23:22:31 【问题描述】：我正在使用 javascript 和 node.js 制作一个聊天应用程序
我已经成功地制作了这个eventListener 并且我收到“无法读取 null 的属性 'addEventListener' ”错误并且我的其他功能都不起作用。
我认为这可能是因为脚本在页面加载之前执行并且已经替换了页面底部的脚本，没有规避。将整个 JS 代码放在一个函数中，该函数将在加载窗口时调用，也不起作用。
<body>
<div id="main">
<h1>chatterbox</h1>
<label>Room:</label>
<form>
<label> name :
<input class="input-username" type = "text">
</label>
<label> comment :
<input class="input-chat" type = "text">
</label>
<button class="btn-submit">Submit</button>
</form>
</div>
<script src="scripts/app.js"></script>
</body>
</html>
const $chatterBox = document.createElement('ul');
$chatterBox.classList.add('chatterbox')
const $btnSubmit = document.querySelector('.btn-submit')
const $inputChat = document.querySelector('.input-chat')
const $inputName = document.querySelector('.input-username')
const app =
server: 'http://52.78.206.149:3000/messages',
init: () =>
app.fetch().then((info) =>
let results = info.results;
results.forEach(result =>
app.renderMessage(result)
);
document.querySelector("#chats").append($chatterBox);
)
,
fetch: () =>
return fetch(app.server)
.then(resp => resp.json())
,
send: (data) =>
return fetch(app.server,
method: 'POST',
headers:
'Content-Type': 'application/json',
,
body: JSON.stringify(data),
)
.then(resp => resp.json())
,
clearMessages: () =>
document.querySelector("#chats").textContent = '';
,
renderMessage: (data) =>
const $li = document.createElement('li');
$li.classList.add('chat');
// $li.classList.add(roomname);
const $span = document.createElement('span');
$span.classList.add('username');
$span.textContent = data.username;
const $p = document.createElement('p');
$p.classList.add('chat-content')
$p.textContent = data.text;
$li.append($span, $p);
$chatterBox.prepend($li);
document.querySelector("#chats").append($chatterBox);
,
makeNewMessage: () =>
if (!$inputName.value)
alert('name here')
if (!$inputChat.value)
alert('text here!')
if($inputName.value && $inputChat.value)
const data =
username: $inputName.value,
text: $inputChat.value,
roomname: 'my room'
app.send(data);
app.renderMessage(data);
;
app.init()
$btnSubmit.addEventListener('click', app.makeNewMessage, false); // error occurs here
【问题讨论】：
这能回答你的问题吗？ Cannot read property 'addEventListener' of null 【参考方案1】：试试：
if ($btnSubmit)
$btnSubmit.addEventListener('click', app.makeNewMessage, false);
【讨论】：
以上是关于js 未捕获的 TypeError：无法读取 null 的属性“addEventListener”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的TypeError：无法读取未定义数据表的属性“长度”
Javascript：未捕获的 TypeError：无法读取 null 的属性“indexOf”
发生以下错误：RGB.js：16未捕获的TypeError：无法读取HTMLButtonElement上未定义的属性'add'。（（RGB.js：16）
未捕获的TypeError：尝试在Vuejs中调用onchange（）方法时，无法读取未定义的属性“apply”