Básicamente, lo que estoy tratando de hacer es mostrar condicionalmente una sección de un formulario. Si un campo de entrada no tiene nada o 0 como entrada, la sección está oculta. De lo contrario, quiero que se muestre la sección. Si bien la sección aparece cuando ingreso números en el campo correcto, no desaparece después de eliminar la entrada.

Hasta ahora, he intentado cambiar el detector de eventos para escuchar la variable busmiles después de moverla fuera de la función, pero eso hace que la sección nunca se muestre. Tampoco estoy seguro de qué está causando este problema, ya que no tengo mucha experiencia en javascript.

archivo HTML

 <label for="weeklybus">On average, how many miles do you take the bus/train in a week?</label><br> <input name="weeklybus" id="weeklybus" type="number" required> <br id="oppositeform"> <div id="busmodeform"> <p>Do you typically take the bus, light rail, or heavy rail?</p> <input name="busmode" id="bus" type="radio" value="bus"> <label for="bus">Bus</label><br> <input name="busmode" id="light" type="radio" value="light"> <label for="light">Light rail</label><br> <input name="busmode" id="heavy" type="radio" value="heavy"> <label for="heavy">Heavy rail</label><br> </div>

JavaScript

 function showFormSection() { var busmiles = document.getElementById('weeklybus').value; const busmode = document.getElementById('busmodeform'); const extralinebreak = document.getElementById('oppositeform'); if (busmiles != "" && busmiles != "0") { busmode.style.display = 'block'; extralinebreak.style.display = 'hidden'; } else if (busmiles == "") { busmode.style.display = 'hidden'; extralinebreak.style.display = 'block'; } } window.addEventListener('input', showFormSection);

EDITAR: Corregido. Cambiado de oculto --> ninguno.