Escribí un script para cambiar las opciones de un segundo elemento SELECT basado en las opciones del primer elemento SELECT. Pero el problema es que cada vez que trato de cambiar las segundas opciones SELECCIONAR, la consola me da el siguiente error. Importante: este es un pequeño fragmento de código de toda mi secuencia de comandos y mi página.
TypeError no capturado: no se pueden establecer propiedades de nulo (configurando 'innerHTML')
mi codigo html
<select id="field_option-1"> <option value="first">First option</option> <option value="second">Second option</option> <option value="third">Third option</option> </select> <select id="field_option-2"> <option value="">Select one</option> </select>Mi código JS
var select1 = document.getElementById("field_option-1"); var select2 = document.getElementById("field_option-2"); select1.addEventListener('change', function(){ var selectValue = this.value; if(selectValue == "first"){ select2.innerHTML = "<option value='new1'>New option 1</option>"; } else if(selectValue == "second"){ select2.innerHTML = "<option value='new2'>New option 2</option>"; } else if(selectValue == "third"){ select2.innerHTML = "<option value='new3'>New option 3</option>"; } });Probé este código en localhost y funciona perfectamente. Pero después de subirlo al servidor, la consola muestra ese error.
Es posible que este código JS se ejecute antes de que se representen las etiquetas de select , depende de dónde se encuentre la etiqueta de secuencia de script que vincula este archivo. En cualquier caso, puede solucionar esto agregando el atributo defer a la etiqueta del script si tiene el atributo src , o colocándolo al final de la etiqueta del body .
Sospecho que modifica dinámicamente el elemento HTML select2, por lo que el guardado en la variable ya no es válido. Puede probar esto para obtener la referencia actualizada en cada devolución de llamada:
var select1 = document.getElementById("field_option-1"); select1.addEventListener('change', function(){ var select2 = document.getElementById("field_option-2"); var selectValue = this.value; if(selectValue == "first"){ select2.innerHTML = "<option value='new1'>New option 1</option>"; } else if(selectValue == "second"){ select2.innerHTML = "<option value='new2'>New option 2</option>"; } else if(selectValue == "third"){ select2.innerHTML = "<option value='new3'>New option 3</option>"; } }); <select id="field_option-1"> <option value="first">First option</option> <option value="second">Second option</option> <option value="third">Third option</option> </select> <select id="field_option-2"> <option value="">Select one</option> </select>