Question

未捕获的类型错误：无法设置未定义的属性“display”

2019-09-07

5542

javascript html typeerror

当我单击此 div 时，我希望它显示一条错误消息，指出它太昂贵了

我尝试将 document.getElementByClassName 更改为变量，但我没想到它会起作用。

function hideError() {
  document.getElementsByClassName("errorMessage").style.display = "none";
}
function showError() {
  document.getElementsByClassName("errorMessage").style.display = "contents";
  setTimeout("hideError", 5000);

未捕获的 TypeError：无法设置未定义的属性“display”

Answer 1

您已经非常接近了。第一个问题， getElementsByClassName 返回 HTMLCollection 。您需要遍历此列表或调用 [0] 来获取第一项。

其次，对 setTimeout 的调用应作为第一个参数的函数（而不是字符串）： setTimeout(hideError, 5000); 。

function hideError() {
  document.getElementsByClassName("errorMessage")[0].style.display = "none";
}

function showError() {
  document.getElementsByClassName("errorMessage")[0].style.display = "contents";
  setTimeout(hideError, 5000);
}

showError();

<div class="errorMessage">ERROR</div>

Answer 2

getElementsByClassName 返回实时 HTMLCollection 。要将样式添加到单个元素，请应用循环。此外， setTimeout 要求第一个参数为 callback 函数，而不是字符串。

function hideError() {
    [...document.getElementsByClassName('errorMessage')].forEach(e => e.style.display = "none");
}

function showError() {
    [...document.getElementsByClassName('errorMessage')].forEach(e => e.style.display = "contents");
    setTimeout(hideError, 5000);
}