时间戳

首页 > 解决方案 > 未捕获的类型错误：无法设置未定义的属性“显示”-如何在我的模态 JS 代码中修复它？

javascript - 未捕获的类型错误：无法设置未定义的属性“显示”-如何在我的模态 JS 代码中修复它？

问题描述

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

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

标签： javascript

解决方案

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

推荐阅读