For a small project I'm working on, I created a div with some css styling, but I can't seem to hide it and I'm not sure why.
var button = document.getElementById("button");
button.addEventListener("click", open);
var popup = document.getElementById("popup");
function open() {
popup.classList.toggle("hidden");
}* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#popup {
width: 15em;
height: 20em;
background-color: rgb(51, 50, 50);
color: rgb(0, 159, 252);
display: flex;
flex-direction: column;
align-items: center;
padding: 1em;
}
.labels {
padding: 0.5em 0;
}
.inputs {
background-color: white;
color: rgb (51, 50, 50);
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-end;
width: 100%;
}
#cancel {
color: red;
position: relative;
bottom: -5em;
left: 3em;
}
#confirm {
position: relative;
bottom: -5em;
left: 2em;
color: rgb(0, 159, 252);
}
.hidden {
display: none;
}<input type="button" value="OPEN" id="button" />
<div id="popup" class="hidden">
<h2>Add town</h2>
<label for="name" class="labels"><span>Name</span></label>
<input type="text" name="name" id="nameInput" class="inputs" />
<label for="country" class="labels"><span>Country</span></label>
<input type="text" name="country" id="countryInput" class="inputs" />
<div class="bottom">
<p id="cancel">Cancel</p>
<p id="confirm">Confirm</p>
</div>
</div>I've attempted to use the Chrome inspect tool, but no errors are showing up.