Tengo un cuadro desplegable en mi sitio web que le permite seleccionar su tema. El problema es que no puedo encontrar la manera de implementarlo. Aquí está el javascript:
//selects the select element let selectTheme = document.querySelector("#select-theme"); //selects 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); })
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>
Incluso el oyente en sí mismo no parece funcionar, ya que no imprime el valor desplegable.
También tenga en cuenta que esto no es todo mi HTML. Acabo de copiar y pegar los elementos relevantes.
El onchange
es un change
no un cambio Una vez que lo cambie, su console.log funcionará
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event