Quiero crear una función para mi sitio web donde el usuario pueda seleccionar la forma en que se mostrará el estilo a través de un formulario.

Enlacé los elementos del formulario a un archivo JS, pero no funciona en absoluto.

Aquí está el código HTML:

 <form> <label for="theme-selector">Select your theme:</label> <select name="theme-selector" id="theme-selector"> <option value="auto">Automatic (default)</option> <option value="light">Light</option> <option value="dark">Dark</option> </select> <button id="apply-theme">Apply</button> </form>

Así es como lo vinculé al script:

 let theme = document.getElementById('theme-selector').value; let applyBtn = document.getElementById('apply-theme'); let time = new Date(); time = time.getHours(); applyBtn.addEventListener('click', () => { let node = document.createElement('link'); node.rel = 'stylesheet'; if(theme == 'auto') { if(time >= 10 && time <= 19) { // daytime theme node.href = 'style/light.css'; } else { // nighttime theme node.href = 'style/dark.css'; } } else { // chosen theme node.href = `style/${theme}.css`; } document.head.appendChild(node); });

La cosa "automática" está hecha para establecer diferentes temas dependiendo de la hora que sea.

No entiendo por qué no funciona. Soy muy nuevo en JavaScript, así que por favor sea amable, ¡gracias!