Having trouble with my overlay design - I've set up a button that should display an overlay div on top of my main div when clicked, but for some reason it's not appearing. Despite watching tutorials and looking for similar issues, I'm unable to figure out why it's not showing.
This is the structure of my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Liu+Jian+Mao+Cao&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="thiscss/randomqoutes.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>RCaT11</h2>
<div class="qoutewrapper">
<h1>Have an Inspirational day!</h1>
<button id="btn">Genererate Qoute</button>
</div>
<div class="overlaycontainer">
</div>
</div>
</body>
<script type="text/javascript" src="javascript/randomqoutes.js"></script>
</html>
In the CSS file, I initially set the "overlaycontainer" class display property to none so it remains hidden until the button is clicked:
body {
background: linear-gradient(to left, #ED8F20, #EBD626);
margin: 0;
padding: 50px;
}
.container {
display: flex;
}
.qoutewrapper {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
width: 900px;
height: 250px;
margin: 0 auto;
margin-top: 10%;
padding: 10px;
display: flex
}
.qoutewrapper h1 {
white-space: nowrap;
font-weight: 700;
font-size: 70px;
margin: 0 auto;
position: relative;
left: 90px;
margin-top: 50px;
}
h2 {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
font-size: 2em;
position: absolute;
left: 90%;
color: red;
float: right;
}
.container button {
color: rgba(26, 25, 25, 0.897) !important;
text-transform: uppercase;
background: none;
padding: 12px;
border: 2px dotted rgba(26, 25, 25, 0.897) !important;
font-weight: 800;
float: right;
margin-top: 200px;
}
.container button:hover {
color: #EBD626 !important;
background: rgba(26, 25, 25, 0.897);
border-color: none !important;
transition: all 0.4s ease 0s;
display: flex;
}
.overlaycontainer {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
display: none;
}
In the JavaScript file, I added code to set the display property of "overlaycontainer" to flex upon clicking the button, but it's still not displaying:
document.getElementById('btn').addEventListener('click', function() {
document.querySelector('.overlaycontainer').style.display = "flex";
})