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

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。为单个元素添加样式应用循环。同样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);
}

Answer 2

你们很亲密。第一个问题，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>