开发者问题收集

未捕获的类型错误：无法读取 javascript 上为 null 的属性“addEventListener”

2018-05-25
136
javascript html

我在运行程序时收到此错误。我输入名称并单击登录按钮，页面将定向到新页面，即 index.html 文件，我收到 Uncaught TypeError 错误：无法在我的第一个 JS 文件中读取 null 的属性“addEventListener”。

这是我的第一个 JS 文件： 

var name = '';
const login = document.querySelector('.logButton');


login.addEventListener('click', () =>{
name = document.querySelector('.name').value;
});

这是此 JS 文件的 HTML 文件正文 

<div class = loginPage>
<input type = 'text' placeholder= 'Username' class = names></input> <a href = '../index.html'><button class = logButton> Login</button></a>
</div>

这是 index.html 的第二个 JS 文件 

const now = new Date();
const hour = now.getHours();
const morning = " ";
const night = " ";
const div = document.querySelector('.page_1_body');

function print(docu){
  div.innerHTML = "<h1> <a href = 'Page_2/page2.html'>" + docu +"</a>";
}

function dayrnight(name){
if ( hour <= 24 && hour < 18 ){
  const morning = "<h1> Good Day " + name + " !</h1>";
  print(morning);
} else {
  const night = "<h1>Good evening " + name + " !</h1>";
  print(night);
}
}

dayrnight(name);

这是 index.html 文件 

<body>
    <div class = page_1_body>
    </div>

<script src="index.js"></script>
<script src = "Login_page/Login.js"></script>
</body>

我发布了代码，以便它可以帮助解决我的问题。谢谢！

3个回答

您忘记将 logBu​​tton class 括在引号中。请按如下方式修复： 

<button class = "logButton">

此外，您需要确保在尝试加载 button 时已生成其 HTML，因此请将 

document.onreadystatechange = function() {
    //Your code here
}

括在您的 JS 代码中。

Lajos Arpad
2018-05-25

您在 class 属性中犯了错误，例如 class = loginPage 、 class = names 和 class = logBu​​tton 。您没有将类名放在双引号中，其次，您的 class=names 应该是 class=name 。

检查以下代码：

将此代码更改为： 

<div class = loginPage>
<input type = 'text' placeholder= 'Username' class = names></input> <a href = '../index.html'><button class = logButton> Login</button></a>
</div>

更改为： 

<div class ="loginPage">
<input type = 'text' placeholder= 'Username' class ="name"></input> <a href = '../index.html'><button class="logButton"> Login</button></a>
</div>

请在此处了解有关 CSS 类属性的更多信息： https://www.w3schools.com/tags/att_global_class.asp

Vikasdeep Singh
2018-05-25

在您的 html 文件中，您应该添加双引号来包裹您想要添加到元素的类名称，如下所示： 

<div class = loginPage>
    <input type="text" placeholder="Username" class="names"></input> <a href="../index.html"><button class="logButton"> Login</button></a>
</div>
A. Maitre
2018-05-25