I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet:
//selecting the select element
let selectTheme = document.querySelector("#select-theme");
//selecting the stylesheet
let style = document.querySelector("#pagestyle");
selectTheme.addEventListener('onchange', () => {
if (selectTheme.value == "dark") {
style.setAttribute("href", "./css/style.css");
}
if (selectTheme.value == "light") {
style.setAttribute("href", "./css/style2.css");
}
console.log(selectTheme.value);
})
Here is the corresponding HTML:
<link rel="stylesheet" type="text/css" href="" id="pagestyle">
<div class="selection-box">
<select class="select-theme" name="selectTheme" id="select-theme">
<option value="dark" id="dark">dark</option>
<option value="light" id="light">light</option>
</select>
</div>
It seems like the event listener is not functioning properly as it fails to display the selected value from the drop-down menu.
Additionally, please note that the provided HTML code is just a portion of the complete webpage layout.