Javascript “display:block” function working on Firefox but not on IE/Chrome

Javascript file:

function otroInputJS(valor) {
    if (valor < 0 || valor > 3) {
        return false; // This is just a verification that the value is actually between 0 and 3, the intended method
    } else {
        // [...]
        document.getElementById('otroInput').style.display="block";
        if (valor !== 3) {
            document.getElementById('inputObj').style.display="block";
            document.getElementById('tipoObj').style.display="block";
            document.getElementById('nombreLabel').innerHTML = valorNombre[valor]+": ";
            document.getElementById('otroInput').placeholder = "-- Agregue más información (opcional) --";
            document.getElementById('otroInput').value = "";
            document.getElementById('tipoObj').value = "";
            document.getElementById('otroInput').required = false;
            document.getElementById('tipoObj').required = true;
        } else {
            document.getElementById('inputObj').style.display="none";
            document.getElementById('tipoObj').style.display="none";
            document.getElementById('otroInput').placeholder = "-- Especifique su caso --";
            document.getElementById('otroInput').value = "";
            document.getElementById('otroInput').required = true;
            document.getElementById('tipoObj').required = false;
        }
    }
}

HTML file:

<!-- [...] -->
<script type="text/javascript" src="./JS/comenDispValor.js"></script>
<!-- [...] -->
<form onsubmit="return checkForm(this)">
  <fieldset>
    <!-- [...] -->
    <select id="tipoConsulta" required>
      <option value="" selected disabled>-- Seleccione opci&oacute;n --</option>
      <option value="sugerencia" onclick="otroInputJS(0);">Sugerencia</option>
      <!-- [...] -->
      <option value="otro" onclick="otroInputJS(3);">Otro</option>
    </select>
    <br>
    <label for="tipoObj" id="inputObj" style="display:none">Seleccione el lugar donde se implementar&aacute; <span id="nombreLabel"></span></label>
    <select id="tipoObj" required style="display:none">
      <!-- [...] -->
    </select>
    <textarea id="otroInput" cols="50" placeholder="" style="display:none"></textarea>
    <br>
    <input type="submit" value="Enviar" id="sub"></input>
  </fieldset>
</form>

Code explanation (and issue):

What I want to do is to make most of my form ‘hidden’ (without taking space on my page, thus that’s why I used display instead of visibility) and then, depending on what the user selects, some options will appear or not. This works perfectly on a Firefox browser, however, for some reason, neither Edge nor Chrome can change the ‘display’ state.

My first attempt at this was using the ‘visibility’ style and make it change from ‘hidden’ to ‘visible’. The code for that isn’t that different, only changed ‘display:block’ to ‘visibility:visible’ (and it still didn’t worked).

The next approach I took was to try to use the ‘display’ one, but again, it doesn’t seem to work neither. Both of these were tried on Firefox, Edge and Chrome, and both of these JS events only worked on the first one, leaving the other 2 browsers as incompatible.

Is there anything wrong with my code? How can I make it so both Edge and Chrome can execute it too.