Hi there, I need some help with getting my code to run properly. I've created a dropdown box using HTML and CSS, but it seems like there's an issue with the JavaScript portion as the options are not being selected. I've included a code snippet below for reference. If you could take a look and provide me with some guidance, I would greatly appreciate it. Thank you in advance!
const select = document.querySelector(".select");
const optionsContainer = document.querySelector(".dropdown-list");
const optionsList = document.querySelectorAll(".dropdown-list_item");
.select.addEventListener("click", () =>{
optionsContainer.classList.toggle("active");
})
optionsList.forEach( o =>{
o.addEventListener("click",() =>{
select.innerHTML= o.querySelector("label").innerHTML;
optionsContainer.classList.remove("active");
});
});.dropdown{
width: 20rem;
position: relative;
padding-left: 20%;
color:white;
}
.dropdown:hover .dropdown-list {
opacity: 10;
visibility: visible;
}
.dropdown-select{
padding: 1.5rem;
border-radius: 4px;
background-color: black;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.6 rem;
cursor: pointer;
}
.dropdown-list{
border-radius: 4px;
background-color: black;
position: absolute;
top:110%;
left: 29%;
right: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s linear, visibility 0.2s linear;
}
.dropdown-list_item{
padding: 1rem;
font-size: 1.4rem;
}<div id="wrapper">
<div id="textbox">
<div id="content">
<h1 class="form">COMPLAINT TYPE</h1>
</div>
<div class="dropdown">
<div class="dropdown-select">
<span class="select">Selected Type</span>
<i class="fas fa-angle-down"></i>
</div>
<div class="dropdown-list">
<div class="dropdown-list_item">Drainage System Issue</div>
<div class="dropdown-list_item">Garbage Collection</div>
<div class="dropdown-list_item">Public Place Cleanliness</div>
<div class="dropdown-list_item">Sweeping Of Roads</div>
<div class="dropdown-list_item">Others</div>
</div>
</div>