Mostrar contenido con Javascript

He estado sumergiéndome en el aprendizaje de JavaScript en los últimos días, y debo decir que es bastante accesible, especialmente si ya tienes experiencia en programación.

En este artículo, compartiré uno de los conceptos más útiles que he aprendido hasta ahora, aunque apenas estoy comenzando a utilizarlo: cómo mostrar más contenido con JavaScript.

Dado que el tutorial es un poco extenso para mostrarlo completamente aquí, lo colocaré tras el salto para que sea más cómodo de leer.

Imaginemos que tenemos un formulario como el siguiente:

<label for="nombre">Introduce tu nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="masDatos">¿Desea introducir más datos?</label>
<select id="masDatos" name="masDatos">
  <option value="si">Sí</option>
  <option value="no">No</option>
</select>

Inicialmente se verá algo así:

Introduce tu nombre:
[caja de texto para el nombre]
¿Desea introducir más datos?
[menú desplegable con opciones Sí/No]

Sin embargo, lo que realmente queremos es que, si el usuario elige «Sí», se muestren más cajas de texto para ingresar esos datos adicionales, ¿verdad?

Vamos a ver cómo quedaría el HTML:

<label for="nombre">Introduce tu nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="masDatos">¿Desea introducir más datos?</label>
<select id="masDatos" name="masDatos">
  <option value="si">Sí</option>
  <option value="no">No</option>
</select>

<div id="masElementos" style="display:none;">
  <!-- Aquí irán más elementos que queremos mostrar -->
</div>

Como puedes observar, hemos añadido un contenedor <div> con el ID «masElementos», que por defecto está oculto (style="display:none;"). En otras palabras, este contenido no se mostrará inicialmente.

Ahora bien, como mencionamos anteriormente, queremos que este contenido se muestre si el usuario selecciona «Sí» en el menú desplegable. Para lograr esto, utilizaremos JavaScript.

Agregaremos la siguiente función JavaScript después del código HTML (después de la etiqueta </html>):

<script>
  function mostrarMasElementos() {
    var var1 = document.getElementById("masDatos").value;

    if (var1 === "si") {
      document.getElementById("masElementos").style.display = "block";
    } else {
      document.getElementById("masElementos").style.display = "none";
    }
  }
</script>

Esta función simplemente captura el valor seleccionado en nuestro menú desplegable cada vez que cambia (evento «onChange» de la etiqueta <select>), y verifica si el usuario seleccionó «Sí». En caso afirmativo, cambia la propiedad CSS «display» del contenedor «masElementos» a «block» (visible).

Es importante colocar la llamada a esta función en el evento «onChange» del menú desplegable, de lo contrario, nada sucederá.

Espero que este artículo te haya resultado útil.