如何修复不响应其 javascript 的元素？答案

【问题标题】：How to fix an element that isn't responding to it's javascript?如何修复不响应其 javascript 的元素？
【发布时间】：2020-01-05 03:23:30
【问题描述】：

function appear() {
	document.querySelector(".modal-bg").style.display = 'flex';
	document.querySelector(".modal-bg2").style.display = 'flex';
}
document.querySelector(".close").addEventListener("click", function() {
	document.querySelector(".modal-bg").style.display = 'none';
	document.querySelector(".modal-bg2").style.display = 'none';
});

body {
	background-image:url("https://i.ibb.co/KqdJ9Dm/218752.jpg");
	background-size:cover;
}
#fc {
	color:white;
	font-weight:bold;
	height:50px;
	width:90px;
	background-image:linear-gradient(#DA4453, #89216B);
	position:relative;
	left:605px;
	top:65px;
}
.modal-bg,.modal-bg2 {
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		justify-content:center;
		align-items:center;
		display:none;
		
}
.modal-content,.modal-content2 {
		width:500px;
		height:300px;
		border-radius:10px;
		position:relative;
		background-color:white;
		top:25px;
}
.modal-bg2 {
	left:600px;
	
	
}
.modal-bg {
	right:315px;
	
	
}
#answer {
	width:140px;
	height:60px;
	position:relative;
	left:185px;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:2px solid black;
	outline:none;
	font-family: 'Oswald', sans-serif;

}

.close {
	position:absolute;
	top:0;
	right:14px;
	font-size:32px;
	transform:rotate(45deg);

}
#s {
	position:absolute;
	top:200px;
	left:225px;
	background-image:linear-gradient(#DA4453, #89216B);
	color:white;
	font-weight:bold;
}
#title {
	border-bottom:2px solid black;
	outline:none;
	border-top:none;
	border-left:none;
	border-right:none;
	font-size:25px;
	font-weight:bold;
	position:relative;
	left:65px;
	top:95px;
	
}
::-webkit-input-placeholder {
   text-align: center;
}
button {
	cursor:pointer;
}

<!DOCTYPE html>
<html>
<head>
	<title>Flash Card Pro</title>
	<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<h1 align = "center">Flash Card Pro ???? ????</h1>
<button id = "fc" onclick = appear();>ADD A FLASH CARD</button>
<div class = "modal-bg">
<div class = "modal-content">
<input type = "text" placeholder="TYPE YOUR QUESTION" id="title" required>
<div class = "close">+</div>
</div>
<div class = "modal-bg2">
<div class = "modal-content2">
<h2 align = "center">TYPE YOUR ANSWER</h2>
<textarea name="answer" cols="4" rows="2" placeholder="TYPE YOUR ANSWER" id = "answer"></textarea>
<input type = "submit" id = "s"  onclick = close()>
</div>
</body>
</html>

我有一个 div 元素，它有一个 close 类，它没有正确响应我的 javascript。我使用 addEventListener click 来执行一个函数，它使 bgmodal 和 bgmodal2 div 不显示。每次我单击元素关闭时，它都不会做任何它应该做的事情，也没有错误。我认为这些元素没有问题，因为我也在其他元素上进行了测试。

我尝试在名为 s 的 div 上使用代码的 addEventListener 部分。我也尝试过以不同的方式执行该函数，例如 document.querySelector(close).onclick = function() 和函数 close() 然后在 Html 中使用 onclick 调用它，它适用于 StackOverflow，我正在使用谷歌浏览器为什么不在那里工作吗？

【问题讨论】：

.modal-bg2 与按钮重叠，建议重新调整您的 css

标签： javascript html css addeventlistener

【解决方案1】：

您遇到了元素重叠问题。无法单击 .close 元素，因为它上面还有另一个元素 (.modal-bg2)。

您已将关闭元素设置为绝对位置。给它一个 z-index 值以确保它在顶部。

.close {
    . . .
    z-index: 10;
}

【讨论】：

我不想用这个不相关的评论来夸大答案，所以我选择将它作为评论发布。在这一点上我可以给出一些建议，但对我来说最突出的是“关闭”应该是一个按钮，而不是一个 div。
或者OP也可以添加按钮和tabindex=0的角色