Mostrar y ocultar secciones con JavaScript

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:12

Mostrar y ocultar secciones con JavaScript

Curso Gratis de Programación Básica 2022

Clase 31 de 84

Clase 31 / 84

Recursos

Aprende a controlar la visibilidad de secciones en una página web usando la propiedad style.display de JavaScript. Esta técnica te permite mostrar elementos solo cuando el usuario los necesita, mejorando la experiencia de un juego o aplicación interactiva como Mokepon.

¿Por qué ocultar secciones HTML con JavaScript?

Cuando construyes un juego por turnos como Mokepon, no quieres que todas las secciones aparezcan al mismo tiempo. Si el botón de reiniciar está visible desde el inicio, el jugador puede reiniciar la partida antes de empezar. Si la sección de ataques se muestra siempre, alguien podría atacar sin haber elegido mascota.

La solución está en mostrar cada sección solo en el momento adecuado del flujo: primero elegir mascota, luego atacar y, al final, reiniciar [02:30].

¿Qué hace style.display = 'none' en JavaScript? Oculta visualmente un elemento HTML sin eliminarlo del DOM. El elemento sigue existiendo en el código, pero el usuario no puede verlo ni interactuar con él.

¿Cómo funciona la propiedad style.display?

Todos los elementos HTML tienen una propiedad style donde se guardan sus estilos visuales, los mismos que también puedes definir con CSS. El navegador, ya sea Chrome, Firefox o el que prefieras, asigna estilos por defecto a botones, textos y demás elementos [05:40].

Dentro de esa propiedad existe display, que controla si el elemento se renderiza o no. Los dos valores que vas a usar en este flujo son:

none: oculta el elemento por completo.
block: lo muestra como un bloque visible.

¿Dónde debo ocultar la sección de ataques al iniciar?

El mejor lugar es la función iniciarJuego, porque se ejecuta apenas carga el HTML. Ahí seleccionas el elemento por su ID y le aplicas display = 'none'.

javascript function iniciarJuego() { sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque') sectionSeleccionarAtaque.style.display = 'none'

sectionReiniciar = document.getElementById('reiniciar')
sectionReiniciar.style.display = 'none'

}

Si inspeccionas el DOM con las DevTools, verás que la sección sigue ahí. Solo está oculta visualmente.

¿Cómo muestro la sección cuando el jugador elige mascota?

La función seleccionarMascotaJugador se ejecuta al hacer clic en el botón de seleccionar. Ese es el momento exacto para cambiar el display de la sección de ataques a block y, al mismo tiempo, ocultar la sección de elegir mascota.

javascript function seleccionarMascotaJugador() { sectionSeleccionarAtaque.style.display = 'block' sectionSeleccionarMascota = document.getElementById('seleccionar-mascota') sectionSeleccionarMascota.style.display = 'none' }

Así el jugador ve un solo paso a la vez: primero elige a Hipodogue o Capipepo, le da clic a seleccionar y entonces aparecen los botones de ataque [08:15].

¿Cuándo debo mostrar el botón de reiniciar el juego?

El botón de reiniciar solo tiene sentido cuando alguien ganó o perdió. Por eso lo escondes desde iniciarJuego con display = 'none' y lo muestras dentro de crearMensajeFinal, que es la función responsable de mostrar el resultado y deshabilitar los botones de ataque.

javascript function crearMensajeFinal(resultadoFinal) { sectionReiniciar.style.display = 'block' }

Con esto, el flujo del juego queda así:

El jugador entra y solo ve la sección de elegir mascota.
Selecciona su mascota y aparece la sección de ataques.
Cuando alguna mascota llega a cero vidas, aparece el botón de reiniciar.

¿Por qué uso block y no otro valor? block muestra el elemento como un bloque que ocupa todo el ancho disponible. Existen otros valores como flex o inline, pero para secciones completas block es el que devuelve el comportamiento por defecto.

¿Qué ganas al controlar la visibilidad con JavaScript?

La lógica del juego ya estaba lista: selección aleatoria del enemigo, ataques por turnos, conteo de vidas de tres a cero y deshabilitar botones al terminar. Lo que añade style.display es control sobre la experiencia del usuario: cada pantalla aparece cuando debe.

Esta misma técnica la vas a reutilizar en formularios por pasos, modales, menús desplegables y cualquier interfaz donde quieras revelar contenido de forma progresiva. El siguiente paso natural es darle estilos con CSS para que tu Mokepon deje de tener fondo blanco y texto negro, y se vea como un juego de verdad.

¿En qué parte de tu proyecto vas a aplicar primero style.display? Cuéntame en los comentarios.

Anny 3312

Hace 4 años

En esta clase utilizaremos a JavaScript Para que algunas de las secciones no estén visibles todo el tiempo sino únicamente cuando se requiera

Ya que tenemos algunas cosas por mejorar

Como la selección de una mascota, la cual no es necesaria para empezar a atacar
El hecho de que el botón de reiniciar está habilitado todo el tiempo
Aparece toda la información al cargar la página y solo necesitamos una parte

Para ello, vamos a utilizar

let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
sectionSeleccionarAtaque.style.display = "none";

Dado que todo el código de los ataques ya se encontraba incluida en una section solo debiamos llamarla y cambiarle los estilos

Sin embargo, cuando seleccionemos la mascota deberá llamarse una función donde se debe tener el código:

let sectionSeleccionarAtaque = document.getElementById("seleccionar-ataque")
sectionSeleccionarAtaque.style.display = "none";

Dado que necesitamos mostrar la sección de ataques para poder jugar

De esta manera podemos ir ocultando partes que no nos interesa mostrar, como por ejemplo el enunciado de seleccionar mascota

let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
sectionSeleccionarMascota.style.display = "none";

Así podemos ir jugando con el código para mostrar solo lo que realmente nos interesa

El código para mostrar un texto sería:

let sectionSeleccionarMascota = document.getElementById("seleccionar-mascota")
sectionSeleccionarMascota.style.display = "block";

oliver fernando palacios ortega

Hace 4 años

gracias

Comentarios (555)555 comentarios

Josue Caballero

Juan Castro

Profesor

Edgar Contreras

Nestor Rios Garcia

Israel Churata

PEDRO MARTIN LOPEZ MILANI

Juan David Rueda Quiroga

Matías Diego Balcázar Ureña

David Alessandro Atahuamán Román

Jesus Alberto Laiton Sanchez

Alejandro Bustamante Hernandez

Camilo Andres Pineda Rugeles

Dianyela Maldonado

Xiomara Alejandra Hernández Arzola

José Antonio Flores Espinoza

Hace 3 años

jose luis gomez angarita

Julian Guerrero

Milena Alejandra García olarte

Ricardo Espinosa

Nora Azua

Diego Ordoñez Clavijo

David Antonio Morales Barrera

Juan Diego Nava Barboza

Micael Urquidi

Pamela Cinthya Torres Gutiérrez

Alejandro Barros Vivanco

Sergio Andrés Afanador Bayona

Juan David Vasquez Rodriguez

Ana Paula Correa

Ricardo Alfonso Chavez Vilcapoma

Camilo Manrique

Leonidas Alberto Ubaque Sandoval

Dámaris Dall’Orto

Diego Alejandro Moreno Pedroza

Andres Felipe Gonzalez Rojas

Juan Diego Rojas Aguilar

Fiorella Hernández

Noé Kelly Huete

Mario Montalvo

Daniel Fajardo Montilla

michel Dayana franco

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero