模态isn'；t在按钮点击时显示-香草JavaScript

我试图用vanilla JS切换模式，但是show按钮不起作用。我希望模态在单击show按钮时添加一个类，该按钮位于项目框的右下角。show类将模态显示为100vhx100vw框

这是我的密码：

//变量
let buttonOne=document.getElementById（“project-1-button”）；
更不用说mod=document.getElementById（“project-1-modal”）；
让closeOne=document.getElementById（“project-1-close”）；
//功能
函数modalOneShow（）{
modalOne.classList.add（“show”）；
}
函数modalOneRemove（）{
modalOne.classList.remove（“show”）；
}
//事件侦听器
buttonOne.addEventListener（“onclick”，modalOneShow）；
closeOne.addEventListener（“onclick”，modalOneRemove）
.projects部分{
高度：自动；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.项目容器{
身高：90%；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
利润率：100px0；
}
.项目标题{
高度：自动；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
利润率：30px0；
}
.项目箱{
高度：400px；
宽度：800px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
背景颜色：黄色；
}
.项目按钮{
身高：10%；
宽度：40%；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
位置：绝对位置；
底部：5px；
右：20px；
}
.项目按钮h4{
边框底部：1px实心#000；
光标：指针；
}
.项目模式{
高度：100vh；
宽度：100%；
对齐项目：居中；
证明内容：中心；
z指数：10；
背景色：#e8ead3；
位置：固定；
排名：0；
左：0；
}
.项目模式内容{
身高：90%；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
位置：相对位置；
}
.项目结束{
高度：40px；
宽度：40px；
位置：绝对位置；
排名：0；
右：10px；
光标：指针；
}
#项目-1-模式{
显示：无；
}
#project-1-modal.show{
显示器：flex；
}

我现在正在做几个项目。这是一张单子。
项目1
阅读更多
你好，这是一个例子
这里有很多非常有趣的文字

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

尝试更改onclick以单击eventlistener

buttonOne.addEventListener("click", modalOneShow);
closeOne.addEventListener("click", modalOneRemove);

您添加了单击
onclick
而不是单击
click
：

target.addEventListener(type, listener [, options]);

有关
类型的信息，请参阅

应按照您的情况进行更正：

buttonOne.addEventListener("click", modalOneShow);

原因是已知的（“onclick”应为“click”）。只是为了好玩：一个使用and
classList.toggle的解决方案


document.addEventListener（“单击”，切换模式）；
功能切换模式（evt）{
const originBttn=evt.target.closest（“#项目-1-按钮”）；
const originModalOpen=evt.target.closest（#project-1-model”）；
如果（！originBttn&&！originModalOpen）{return；}
const modalNode=document.querySelector（“project-1-modal”）；
modalNode.classList.toggle（“显示”）；
}
.projects部分{
高度：自动；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.项目容器{
身高：90%；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
利润率：100px0；
}
.项目标题{
高度：自动；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
利润率：30px0；
}
.项目箱{
高度：400px；
宽度：800px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
背景颜色：黄色；
}
.项目按钮{
身高：10%；
宽度：40%；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
位置：绝对位置；
底部：5px；
右：20px；
}
.项目按钮h4{
边框底部：1px实心#000；
光标：指针；
}
.项目模式{
高度：100vh；
宽度：100%；
对齐项目：居中；
证明内容：中心；
z指数：10；
背景色：#e8ead3；
位置：固定；
排名：0；
左：0；
显示：无；
}
.项目模式内容{
身高：90%；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
位置：相对位置；
}
.项目结束{
高度：40px；
宽度：40px；
位置：绝对位置；
排名：0；
右：10px；
光标：指针；
}
#项目-1-模式{
显示：无；
}
#project-1-modal.show{
显示器：flex；
}

我现在正在做几个项目。这是一张单子。
项目1
阅读更多
你好，这是一个例子
这里有很多非常有趣的文字

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除非是出于非故意的原因，否则不应因疏忽而受到惩罚