Question

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>

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

我尝试在s的div上使用代码的addEventListener部分。我也尝试做不同的功能，例如document.querySelector（close）.onclick = function（），然后只是函数close（），然后在HTML中用onclick调用它，它可以在StackOverflow上使用，而我使用的是google chrome在那不工作吗？

Answer 1

您有一个元素重叠问题。点击.close元素是不可能的，因为它上面还有另一个元素（.modal-bg2）。

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

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

如何修复对JavaScript不响应的元素？

1 个答案: