未捕获的类型错误：无法将属性'display'设置为未定义 - 如何在我的模态的 JS 代码中修复它？

Question

我试图从中制作模态，但由于"未捕获的类型错误：无法设置未定义的属性'显示'"，它无法正常工作。如何解决？

var modal = document.getElementsByClassName("modal-inner");
var btn = document.getElementsByClassName("open-button");
var close = document.getElementsByClassName("close-button")[0];

btn.onclick = function () {
    modal.style.display = "block";
}
close.onclick = function () {
    modal.style.display = "none";
}

Answer 1

modal是一个HTML元素数组，因此没有属性style。

您需要访问具有给定索引的特定索引或对它们进行forEach以设置该数组中每个项目的样式：

具体一个：

btn.onclick = function () {
    modal[0].style.display = "block";
}
close.onclick = function () {
    modal[0].style.display = "none";
}

所有模态：

btn.onclick = function () {
    modal.forEach(m => m.style.display = "block");
}
close.onclick = function () {
    modal.forEach(m => m.style.display = "none");
}