Why am I getting Cannot read property 'style' of null when trying to change div style by id?

Question

I have read similar questions regarding this error but still couldn't debug my situation.

I need one part of my program to change some html (mainly show and hide less or more inputs) depending on what the user selects.

I am using document.getElemenyById().style.display ="block" and "none" to change that property of the divs in the html file but one of them gets the error referring to its style property being null.

I can't figure out why, as it seems to me to have no difference with the one above it: id="opcionesdeMandamiento" works fine showing and hiding, but document.getElementById("opcionesdeInhibición").style.display = "block" gets Uncaught TypeError: Cannot read property 'style' of null.

I will cut most of the original input options to make it more readable, basically they are just a bunch of select tags, text and numbers fields and checkboxes.

HTML

 <!-- MEDIDAS CAUTELARES -->
<select id="cautelar" onchange="selecciondeCautelar()">
   <option value="default">Seleccionar Medida Cautelar</option>
   <option value="mandamiento">Mandamiento</option>
   <option value="inhibición">Inhibición General</option>
</select>



<!-- OPCIONES DE MANDAMIENTO-->
<div id="opcionesdeMandamiento" style="display:none">
<label>Ley:
<select>
  <option value="Local">Local</option>
  <option value="3.556">3.556</option>
  <option value="22.172>">22.172</option>
</label><br>
</div>

<!-- OPCIONES DE INHIBICIÓN-->
<div id="opcionesdeInhibición" style="display:none">
<input type="checkbox">
</div>

JS

//Selección de medida Cautelar
function selecciondeCautelar() {
  switch (document.getElementById("cautelar").value) {
  case "mandamiento": //show opcionesdeMandamiento
  document.getElementById("opcionesdeMandamiento").style.display = "block";
  break;
  case "inhibición": //show opcionesdeInhibición
  document.getElementById("opcionesdeMandamiento").style.display = "none";
  document.getElementById("opcionesdeInhibición").style.display = "block";
  break;
}
}

document.getElementById("opcionesdeInhibición").style.display = "block";

This line is the one that cannot be executed; I have already tried placing the script inside the html body, in a different file as well as trying to get its value through the console with no success.

Thanks in advance!

Answer 1

Your problem was typo error, you didin't close html </select> see my example:

 function selecciondeCautelar() { switch (document.getElementById("cautelar").value) { case "mandamiento": //show opcionesdeMandamiento document.getElementById("opcionesdeMandamiento").style.display = "block"; break; case "inhibición": //show opcionesdeInhibición document.getElementById("opcionesdeMandamiento").style.display = "none"; document.getElementById("opcionesdeInhibición").style.display = "block"; break; } }

 <!-- MEDIDAS CAUTELARES --> <select id="cautelar" onchange="selecciondeCautelar(this)"> <option value="default">Seleccionar Medida Cautelar</option> <option value="mandamiento">Mandamiento</option> <option value="inhibición">Inhibición General</option> </select> <!-- OPCIONES DE MANDAMIENTO--> <div id="opcionesdeMandamiento" style="display:none"> <label>Ley:</label> <select> <option value="Local">Local</option> <option value="3.556">3.556</option> <option value="22.172>">22.172</option> </select> </div> <br> <!-- OPCIONES DE INHIBICIÓN--> <div id="opcionesdeInhibición" style="display:none"> <input type="checkbox"> </div>

i suggest you to use this on inline call function and use it on your function like :

function selecciondeCautelar(el) {

  switch (el.value) {

Another tips use variable for the two div because you need to use always.