Manipulación del DOM con JavaScript para mostrar mascota seleccionada

Clase 21 de 84 • Curso Gratis de Programación Básica

Clase anteriorSiguiente clase

Jesus Alberto Laiton Sanchez

student•

Excelente la actitud del profe, explica muy bien, me gustan las onomatopeyas XD

Rubén Cuello

student•

jajaj. Juan sí sabe transmitir la emoción :smile:

Nelson Monago

student•

y pooom, lo entendí bien xd

Carlos Andres Gomez Silva

student•

Es impresionante el proyecto que se creará en el curso y totalmente gratis, muy orgulloso de Platzi

Rubén Ernesto Aragón Gil

student•

Te miro hasta el final, ánimo.

Rubén Althair De Los Santos Suárez Aliaga

student•

espero poder verlos al final 🫡

{Js Mendoza}

student•

El profe Mike Wheeler es muy entretenido, muchas gracias Platzi!

Heberth López

student•

Buena referencia jajaja 😂

Edison Manrique

student•

Enoc Delgado

student•

Juan hace amar JavaScript, ese amor por enseñar se necesita en todos lados, así habría excelentes profesionales en todas las áreas.

Teo Zavala

student•

Muy cierto.

tiken .

student•

Volviendo a Platzi después de mucho tiempo 💪🏼

Diego Alejandro Moreno Pedroza

student•

Ya casi llegamos a esas clases!!!

tiken .

student•

Mucha fuerza Diego, ánimo 💪🏼

Nestor Colmenarez

student•

Adoro estas clases online donde puedo repetir toda la clase y el profesor no se cansa xd

Gustavo Arias

student•

📌Metodo para manipulación de DOM (JS) . Podemos cambiar el contenido html con javascript, hay varios metodos pero vamos a ver el Element.innerHTML Primero, meter el contenido html dentro de la etiqueta span: . ❗ Definición: (span - abarcar) Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea. ❗ Sus etiquetas son: y (ambas obligatorias). ❗ Está definido como: Elemento especial, y por lo tanto en línea. ❗ Crea una caja: En línea. ❗ Puede contener: Texto, y/o Elementos en línea. 📍 Para saber sus atributos, leer esta fuente: https://developer.mozilla.org/es/docs/Web/HTML/Element/span . Una vez todo el contenido html (palabra o frase) que queremos dinámicamente cambiar con javascript está dentro de la etiqueta span y tiene su atributo ID, vamos al código de javascript: Llamamos ese ID con un document.getElementById(" ") y lo ponemos dentro de una variable. Y podemos modificar su contenido así: . let variableX = document.getElementById(" ") variableX.innerHTML = " " . Espero y les sirva de algo 💚

Andrés Rodríguez

student•

gracias Gustavo, muy bien explicado¡

Oswaldo Fernandez

student•

Excelentes tus aportes. Muchas gracias.

Dámaris Dall’Orto

student•

Asi como pueden usar .innerHTML tambien pueden usar .textContent e .innerText

Freddy Reinel Reyes Rojas

student•

Cuál sería la diferencia?

Matias Emanuel Benitez Blanco

student•

Muy buena clase, la verdad estoy aprendiendo mucho y el animo del profe es una genialidad. Transmite esas ganas de aprender

Betsy Malely Astudillo Gutiérrez

student•

Apenas estoy iniciando el mundo de la programación y me hace feliz encontrar este tipo de profesores, me hacen sentir que lo estoy logrando y puedo llegar mucho más allá, me contagia su emoción 😁

Juan Carlos Espinoza Flores

student•

Así quedo, reutilice las variables que teniamos declaradas y con el metodo id se obtiene el nombre de cada mascota.

Erick Alay

student•

Genial! :D

Rafael Arango Ramirez

student•

Es este caso, estaria bien si optenemos el nombre de la mascota por el metodo id, pero tengo una duda si el sostenible ya que puede que el id sea diferente al texto del contenido

Laura Camila Pregonero

student•

Hello Students, Hi Juanchooo Tomé la decisión de dejar las alertas y adicionar el  también dentro de mí " _if _ ".

La programación se debe hacer con humor y paciencia, considero que las alertas dan esa milla extra y hace más happy el juego de Mokepon. Espero os guste :)

Brayan Estiben Rodallega Saavedra

student•

Jajajaja😂, super genial los mensajes de las alertas😂 Concuerdo, lo importante es que disfrutes haciendolo...🚀 Salu2👋

David Alessandro Atahuamán Román

student•

Jajaja Xd

Ronald Ramírez Sarmiento

student•

¡Que nivel de profesor! Motivado directo a la siguiente clase.

Victor R Vele

student•

Me encanta tu carisma de enzeñar que lo motiva gracias

Juan Castro

teacher•

Cesar David

student•

sinceramente es lo mas duro a lo que me he enfrentado en mi vida pero que buen profe gracias de a poquito ahi vamos con fe

Elizabeth M

student•

Igual parar mi sin saber nada de programación me anime y se que poco poco iremos mejorando y cada vez nos será mas fácil.

Michelle Duque De La Rosa

student•

Link de documentación de innerHTML

Matias Emanuel Benitez Blanco

student•

Esta fue la manera en que lo hice.

function seleccionarMascotaJugador() {
    let spanMascotaJugador = document.getElementById("mascota-jugador")


     if(document.getElementById("hipodoge").checked){
         alert("seleccionaste a Hipodoge")
         spanMascotaJugador.innerHTML = "Hipodoge"
     }else if (document.getElementById("capipego").checked){
         alert("seleccionaste a capipego")
         spanMascotaJugador.innerHTML = "capipego"
     }else if (document.getElementById("ratigueya").checked){
         alert("seleccionaste a ratigueya")
         spanMascotaJugador.innerHTML = "ratigueya"
     }else{
         alert("SELECCIONA UNA MASCOTA")
     }

Jefferson Carranza

student•

me imagino que esto es con la finalidad de que siga mostrando el alert de "seleccionaste tal cosa " me estaba preguntando los mismo, que pasa con la alerta de selección?

David Antonio Morales Barrera

student•

El audio sigue bajo, no es problema de tus bocinas/audifonos

Nelson Monago

student•

Para mi el audio está perfecto y eso que estoy a volumen 16%

El problema es de tu bocina/audífono

David Antonio Morales Barrera

student•

Parece que ya lo corrigieron, GRACIAS!!!

Sergio Contreras

student•

Tengo el código exactamente igual que el profesor y no funciona, alguien sabe por que ?

Juan Castro

teacher•

Si tuvieras exactamente el mismo código, tendrías exactamente el mismo resultado. Si no lo tienes, entonces tu código no es exactamente el mismo. Si quieres, compártenos tu código y te ayudamos a ver por qué no funciona.

Rodolfo jesus de las salas orozco

student•

me ha pasado exactamente lo mismo, luego de que lo reviso hasta tres veces, me encuentro con errores de espacios, o incluso de letras, por ejemplo imput e input. claro todos errores míos, revisa con calma, es mejor darte cuenta por ti mismo de los errores, a tener solamente que copiar lo que dice el profe. un saludo.

Yudi Paola Villamil Diaz

student•

Hola! Soy muuuuyyy nueva en el tema, alguien sabe porqué me genera este error luego del .innerHTML?

"Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at HTMLButtonElement.seleccionarMascotaJugador"

mario lopez

student•

Hola, Me sucedió lo mismo y el problema estaba en que no había "guardado" los cambios que había realizado en HTML.

Diego Alejandro Moreno Pedroza

student•

Puedes compartir una imagen de lo que te está pasando?

function seleccionarMascotaJugador() {
    let spanMascotaJugador = document.getElementById("mascota-jugador")


     if(document.getElementById("hipodoge").checked){
         alert("seleccionaste a Hipodoge")
         spanMascotaJugador.innerHTML = "Hipodoge"
     }else if (document.getElementById("capipego").checked){
         alert("seleccionaste a capipego")
         spanMascotaJugador.innerHTML = "capipego"
     }else if (document.getElementById("ratigueya").checked){
         alert("seleccionaste a ratigueya")
         spanMascotaJugador.innerHTML = "ratigueya"
     }else{
         alert("SELECCIONA UNA MASCOTA")
     }

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

Fundamentos de Programación

Programación Básica: Fundamentos y Creación de Proyectos en Línea

Programación Básica en Google Chrome: Variables y Funciones

Creación de una Página Web Básica con HTML

Estructura Básica de un Documento HTML

Estructura y funcionamiento básico de HTML y JavaScript

Instalación y uso básico de Visual Studio Code para programar

Declaración y Uso Básico de Variables en JavaScript

Programación de Piedra, Papel o Tijera en JavaScript

Programación de Piedra, Papel o Tijera en JavaScript

Generación de Números Aleatorios con JavaScript

Creación y uso de funciones en programación

Ciclos y Condiciones en Programación: Piedra, Papel o Tijera

Programación de un Juego de Piedra, Papel o Tijera en JavaScript

Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

Manipulación del DOM y Eventos en JavaScript para Juegos Web

Desarrollando un juego con HTML y JavaScript

Maquetación de Páginas Web para Videojuegos en HTML

Selección de Mascotas en HTML para Juegos Interactivos

Programar eventos de clic en botones HTML con JavaScript

Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota

Selección de Mascota en JavaScript: Implementación y Validación

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

Selección Aleatoria de Mascota Enemiga en JavaScript

Eventos de clic y lógica de ataque en JavaScript

Ataques Aleatorios para Mascotas Enemigas en JavaScript

Creación de Mensajes Dinámicos en Combate HTML y JavaScript

Lógica de Combate en JavaScript para Juego Mokepon

Operadores Lógicos en Programación: AND, OR y NOT

Actualización de Vidas en Juego de Combate con JavaScript

Validación de Vidas y Mensajes Finales en Juegos

Funcionalidad de Reinicio y Desactivación de Botones en Juego

Mostrar y ocultar secciones en HTML con JavaScript

Estilos con CSS

Estilos CSS: Selectores, Propiedades y Valores

Tipos de Visualización en CSS: Display Block, Inline e Inline Block

Alineación de Elementos con Flexbox en CSS

Modelo de Caja en CSS: Espaciado y Bordes

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

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

Estilos CSS para Mejorar la Interfaz de un Juego

Estilizado de Pantallas de Juego con CSS y Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid: Organiza Elementos en Rejillas Bidimensionales

Diseño Responsivo con CSS: Media Queries y Flexbox

Pseudoclases en CSS: Mejora la Interacción del Usuario

Optimización de código

Optimización de Código JavaScript con Clases y Objetos

Optimización de Código JavaScript: Variables y Funciones

Optimización de Código JavaScript con Clases y Objetos

Construcción de Clases y Objetos en JavaScript

Uso de Arreglos para Almacenar Objetos en JavaScript

Agregar ataques a objetos en JavaScript

Renderizado Dinámico de Objetos en HTML con JavaScript

Solución de errores en variables y elementos HTML en JavaScript

Uso de Objetos para Centralizar Información en JavaScript

Selección de Mascota Aleatoria en JavaScript

Iteración de Arreglos y Manipulación DOM en JavaScript

Crear Función "mostrarAtaques" en JavaScript para Juegos

Eventos de Clic en Botones con JavaScript

Secuencia de Ataques y Validación de Resultados en JavaScript

Implementación de lógica de combate en juegos JavaScript

Programación de Juegos: Lógica de Ataques y Victorias

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

Mapa con canvas

Dibujo y manejo de gráficos en Canvas con JavaScript

Movimiento de Capipepo en Canvas con HTML y JavaScript

Movimiento Continuo de Personajes en Canvas con JavaScript

Eventos de Teclado para Controlar Personajes en Juegos

Pintar Fondos y Personajes en Canvas HTML

Métodos de Clases en JavaScript para Juegos Interactivos

Detección de Colisiones en Videojuegos con JavaScript

Programación de eventos y colisiones en un juego interactivo

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos Responsivos en HTML y CSS para Mapas Interactivos

Backend: videojuego multijugador

Desarrollo de Juegos Multijugador con Cliente-Servidor y API

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

Uso básico de la terminal de comandos y Node.js