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

Question

当我点击这个div时，我希望它显示一条错误消息，说它太贵了

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

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

未捕获类型错误：无法设置未定义的属性"显示">

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);
}