Question

未捕获的类型错误：无法读取 null 的属性（读取‘style’）

2022-02-06

3277

javascript

我试图使 div 可点击，以便将其重定向到其他文档或网站，但出现了错误。但是，它可以使用旧方法，即在元素内使用 onclick 作为属性。

var examscol = document.getElementById("exam-col1");
function examCol() {
  return window.location.assign("https://www.w3schools.com")
}

examscol.addEventListener("click", examCol);

有什么建议可以解释为什么这种方法不起作用？

Answer 1

我认为此代码没有问题，只是其他一些样式错误。您可以检查您的 html 是否正常，并显示您的代码以确保问题所在。非常乐意

Answer 2

1. 问题

问题在于元素的 id 不是 exam-col1 。当我将元素的 id 更改为 exam-col 时，出现以下错误 ^[1] :

Error
{
  "message": "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')",
}

2. 提示

当 URL 的 X-Frame-Options 字段设置为 SAMEORIGIN 时，无法显示框架。 X-Frame-Options HTTP 响应标头可用于指示是否应允许浏览器在 <frame> 、 <iframe> 、 <embed> 或 <object> 中呈现页面 ^[2] 。这就是我更改目标网址的原因。

/* If there is no item with an id of "exam-col1" on the page, you will get a "null" error. */
var examscol = document.getElementById("exam-col1");

function examCol() {
 return window.location.assign("https://www.wikipedia.com")
}

examscol.addEventListener("click", examCol);

.clickable {
  display: inline;
  cursor: pointer;
  padding: 5px;
  border: 1px solid red;
}

<!-- Note that the id of the item is "exam-col1". -->
<div id="exam-col1" class="clickable">Open</div>

^{1 -

JavaScript TypeError：无法读取 null 的属性“style”}
^{2 -

X-Frame-Options}