Manipulación del DOM con JavaScript para mostrar mascota seleccionada

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

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

RESUMEN

Para alterar el texto que tenemos en nuestro HTML (o manipular el DOM como se dice técnicamente), se puede usar innerHTML.

Con la etiqueta <span id=""> en el html, indicamos que este texto va a ser manipulado dinámicamente, asi que obtenemos su id como hemos hecho en clases anteriores y guardamos el elemento en una variable, asi esta variable la podemos editar y reemplazar por el texto que queramos.

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

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

Volviendo a Platzi después de mucho tiempo 💪🏼

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

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

📌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: <span> </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: <span> y </span> (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 💚

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

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 😁

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

Hello Students, Hi Juanchooo Tomé la decisión de dejar las alertas y adicionar el <span> 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 😃

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

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

Link de documentación de innerHTML

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")
     }

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

Hasta ahorita se me ocurrio ir subiendo todo mi proyecto a un repositorio de Github.

y POOOM me quedó claro! 🔥

A veces tardo hasta 4 horas en empezar a ver los videos de algo que en efecto es simple y bien explicado porqué cuando estaba en la universidad cursando Ciencias de la Computación, estos temas se consideraban triviales cuando no lo son, por lo que mi percepción se volvió en mi contra, haciendomé sentir un impostor cuando no sabía algo que nunca me enseñaron

DIFERENCIA DE INNERHTML E INNERTEXT

-Con innerHTML se puede agregar etiquetas dentro de la etiqueta seleccionada, incluso si no están específicamente escritas en el código HTML.

-Con innerText solo se puede agregar una cadena de texto, incluso si agregas etiquetas, se mostraran como texto en el navegador.

Excelente profesor, realmente una gran dinámica 👏👏👏

Esta clase vale ORO!

¡Excelente profesor!

Excelente, seguimos avanzando

function confirmarSeleccionJugador1() {
    let seleccionAjolote = document.getElementById('ajolote')
    let seleccionTopo = document.getElementById('topo')
    let seleccionHormigaDeFuego = document.getElementById('hormigadefuego')
    let seleccionKomodo = document.getElementById('komodo')
    let seleccionTortuga = document.getElementById('tortuga')
    let seleccionCaballoDeMar = document.getElementById('caballodemar')
    let spanMokeponJugador1 = document.getElementById('mokepon-jugador1')


    if(seleccionAjolote.checked) {
        alert('Has seleccionado al ajolote')
        spanMokeponJugador1.innerHTML = 'AJOLOTE'
    } else if(seleccionTopo.checked) {
        alert('Has seleccionado al topo')
        spanMokeponJugador1.innerHTML = 'TOPO'
    } else if(seleccionHormigaDeFuego.checked) {
        alert('Has seleccionado a la Hormiga de fuego')
        spanMokeponJugador1.innerHTML = 'HORMIGA DE FUEGO'
    } else if(seleccionKomodo.checked) {
        alert('Has seleccionado al Dragón de Komodo')
        spanMokeponJugador1.innerHTML = 'DRAGON DE KOMODO'
    } else if(seleccionTortuga.checked) {
        alert('Has seleccionado a la tortuga')
        spanMokeponJugador1.innerHTML = 'TORTUGA'
    } else if(seleccionCaballoDeMar.checked) {
        alert('Has seleccionado al Caballo de mar')
        spanMokeponJugador1.innerHTML = 'CABALLO DE MAR'
    } else {
        alert('Por favor, elige un Mokepon')
    }

BOOOOMM!! que emocionan jajajaja, Juan es muy divertido.

A mi me gusta nombrar a las variables de forma grupal para mantener un orden, en lugar de una por una y me queda así:

Me agrada este profesor explica las cosas con el alma y eso me inspira a llegar mas allá en la programación 😄

Alguien aprendiendo en 2023?

Lo más lindo que encuentro en este poco recorrido de la programación es la infinidad de formas para llegar a un mismo resultado, eso nos lleva a pensar y tratar de solucionar problemas cotidianos con lo que aprendemos. Excelente la actitud del profe.

Ésta clase costó, pero se siente genial ver que de a poco va progresando!

Excelente la forma en que el profe Juan da las clases, que bien Platzi. Tienen buen equipo

@Juan David Castro Gallego que gran profesor eres. Muchas gracias por tu motivación. Ha sido excelente este curso!

Profe tienes un gran talento para enseñar 👌

hola Juan me gusta tu stylo, Soy muy novato pero voy exageradamente motivado.😎

y pooom !!! jajajaa

Increible,me identifique totalmente con Juan en este clase. Nunca perdiendo la emocion hasta el ultimo momento😂

Juan es un excelente profesor, me hizo volver a amar el mundo de la programación ❤

😂Es impresionante el proyecto que se creará en el curso y totalmente gratis😂

A alguien más le sucede que piensa tener mal el código pero realmente está bien con la diferencia que se distrajeron y esperaban un resultado diferente?

innerText: muestra el texto literalmente como está en el código.

innerHTML: aplica lo desarrollado a los elementos

Mi codigo

<code> 
iniciarJuego = () => 
{
   let buttonMascotas = document.getElementById("seleccionarMascota");
   buttonMascotas.addEventListener("click",seleccionMascotas); 
}

seleccionMascotas = () => 
{
   // querySelectorAll genera un nodelist con todos los elementos similares 
   let nodelist = document.querySelectorAll("#seleccionar-mascota input");
   let inputMascotas = [].slice.call(nodelist);
   let nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
   let spanMascotaJugador = document.getElementById("mascota-jugador");

   //forEach es el metodo de recorrer un arreglo.
   inputMascotas.forEach((valor, indice) => 
   {
      console.log(valor);
      console.log(indice);
      if(valor.checked)
      {  
         spanMascotaJugador.innerHTML= ` ${nombresMascotas[indice]}`;
      }
   })
}
window.addEventListener("load", iniciarJuego)

Asi me quedo hasta el momento:

<code> 
function iniciarJuego(){
    let botonMascotaJugador = document.getElementById("boton-mascota");
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);
}

function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let mascotaAliada = ""

    if(inputHipodoge.checked){
       mascotaAliada = "Hipodogue"
    } else if(inputCapipepo.checked){
       mascotaAliada = "Capipepo"
    } else if(inputRatigueya.checked){
       mascotaAliada = "Ratigueya"
    } else {
        mascotaAliada = "nadie"
    }

    document.getElementById("nombreJugador").innerHTML= mascotaAliada
    alert("Seleccionaste a " + mascotaAliada)
}


window.addEventListener("load", iniciarJuego)

Excelente clase muy divertida😄

Este curso es genial! Nunca habia informado sobre este campo, es nuevo para mi, por momentos me trabo porque no entiendo algo, o porque algo no me sale y no logro ver el error, pero es gratificante cuando logras solucionarlo por tu propia cuenta poco a poco. Los profes son geniales y hacen que quiera seguir viendo las clases ¡Gracias por crear este curso!

un aporte, cuando se use input radio es mejor utilizarlo de la manera que se ha visto siempre , como aparece en este cuadro con el punto para seleccionar antes de la opcion. es menos enredado

cool

Explica tan bien que todos los conceptos que ha aplicado los he ido aplicando a la página de ingreso de mi idea de negocio jaja

Muy bueno la clase 💪🏼

¡¡La personalidad y enseñanzas del profe Juan es simplemente increíble!! ❤

¡¡MUy buena explicación!! A seguir prácticando.

que bueno que ya estemos incorporando nuevas tecnicas con JS😁

Me encantan las clases de profe Juan David, estoy aprendiendo a Tope!

Debo admitir que esta lección ha sido algo difícil para mí, la función innerHTML se me hizo muy abstracta y he regresado mil veces al video, a los apuntes y a la documentación. Creo que ya más o menos )😦

Extraño a Freddy pero el nuevo profe es un capo! Todavia no terminan las clases con el y ya lo extraño ajjajaj😢

que buen proyecto, siento que estoy aprendiendo en modo flash ❤️

definitivamente la manera de explicar del profe es sensacional, paciente, explicativo…que se yo, me gusta que se le entiende muy bien!

magnifica manera de enganche para un curso

Estuve una hora preguntándome por qué no funcionaba y escribí

'mascota-jugadpr'

en vez de

'mascota-jugador'

saben por que me aparece esto?

no pudodo hacer que salga el nombre con los vidas
😦

A MESSIRVE

El profe, me motiva a seguir estudiando programación, con su actitud tan positiva. 💚

Aqui la documentacion

Super el profe Juan David, se te comprende muy bien! Gracias

Qué honda banda soy nuevo aquí lo que entendí te lo resumo y será mi aporte
te explicaré como manipular él dom
antes de todo tienes que saber que todo lo que está aquí adentro del HTML <span></span> puede cambiar.

Entonces piensa si lo que está ahí dentro puede cambiar, nosotros podemos manipular eso en JavaScript.
¿Pero cómo?
primero sí tenemos varios <span></span> en el HTML tenemos que darle un, id a cada uno para saber a cuál de todos llamar en JavaScript
ejemplo:

<span id=“mascota-jugador”></span>

esto dentro de un párrafo

<p>Tu mascota <span id=“mascota-jugador”></span> tiene <span>3</span> vidas</p>

ahora que le pusimos un, id dentro de <span></span>
sabremos como llamarlo desde JavaScript,
Así que creamos una function en JavaScript en la cual llamaremos al con el
<span id=“mascota-jugador”></span>
con

document.getElementById(“mascota-jugador”)

pero todo esto tiene que ir dentro de una function
ejemplo:

function seleccionarMascotaJugador() {

let spanMascotaJugador = document.getElementById(“mascota-jugador”)

listo ya casi terminamos, solo nos falta una cosa para que todo funcione, hacer que el nombre cambie, según a la mascota que elija el jugador
sabemos que este codigo

if(inputAguita.checked){
alert(“tu mascota sera aguita 💧”)
nos manda una alerta según la mascota elegida pero no cambia el dom
Así que podemos cambiar ese

alert(“tu mascota sera aguita 💧”)

con un innerHTML esta es una función que sirve para cambiar el texto por cualquier otro que tú quieras pero dedemos elegir a que <span></span> le cambiara el texto por eso es muy importante ponerle un, id
como nosotros ya hicimos todo el proceso para llamar al span,

let spanMascotaJugador = document.getElementById(“mascota-jugador”)
ahora solo tenemos que cambiar el texto que lleva dentro con un innerHTML

ejemplo:

spanMascotaJugador.innerHTML = “aguita 💧”

Y listo aprendiste una de las formas de manipular el dom .
Dime si te sirvió… jajaj la verdad es que soy nuevo programando

Usé la función que retorna un entero aleatorio para asignar la mascota enemiga de forma aleatoria usando un número entre 0 y la longitud de ‘arreglo’ de nodos. Solo se asigna si la mascota está chequeado.

Es increible la forma en que se esta usando la manipulacion del DOM usando el codigo de “span” declarado en el html. Espero con ansias la siguiente clase. Estoy listo para seguir recordando y aprendiendo.

De momento así va mi código pero en inglés (así practico ambas).

function startGame(){
    let selectPet = document.getElementById("select_pet")
    selectPet.addEventListener("click", selectPetPlayer)
}


function selectPetPlayer() {
    let inputHipodoge = document.getElementById("hipodoge")
    let inputCapipepo = document.getElementById("capipepo")
    let inputRatigueya = document.getElementById("ratigueya")
    let inputLangostelvis = document.getElementById("langostelvis")
    let inputLucapalma = document.getElementById("lucapalma")
    let inputPydos = document.getElementById("pydos")

    let spanPlayerPet = document.getElementById("name_player_pet")

    if (inputHipodoge.checked) {
        spanPlayerPet.innerHTML = "Hipodoge"
    } else if (inputCapipepo.checked) {
        spanPlayerPet.innerHTML = "Capipepo"
    } else if (inputRatigueya.checked) {
        spanPlayerPet.innerHTML = "Ratigueya"
    } else if (inputLangostelvis.checked) {
        spanPlayerPet.innerHTML = "Langostelvis"
    } else if (inputLucapalma.checked) {
        spanPlayerPet.innerHTML = "Lucaplma"
    } else if (inputPydos.checked) {
        spanPlayerPet.innerHTML = "Pydos"
    } else{
        alert("Choose your pet")
    }
}

window.addEventListener("load", startGame)

Exelente la explicacion profe, felicidades a platzi…

Gracias profe Juan David Castro, muy buena explicacion

innerHTML !
Info aquí!

Documentación explicación

Hace mucho había hecho un curso de html y javascript y estoy haciendo este para refrescar conocimientos y es excelente la forma de los profes de enseñar y transmitir los conocimientos!, me encantó

muy buena la clase !!! mas mas mas

me encanta esto hahahahahaha ojala aprenda rápido

Super didáctico, excelente actitud y muy claro ; se aprende mucho

📌 Con JS se puede manipular el contenido del HTML generando aún más interactividad

Eres increíble, me gusta mucho cómo enseñas…

Te felicito Juan, tus clases son muy estimulantes, tus explicaciones clarisimas, saludos desde Argentina

me gusta el dinamismo del profe esta uno muy atento a la clase 😉

El profe Juan si esta en su salsa, se siente como transmite alegria al enseñar estos temas, lo felicito y es facil entender con esa actidud, gracias.

Grande profe!!

Con <span></span> podemos poner el nombre que queramos dentro de un parrafao. Pero debe tener un <span id="mascota-jugador"></span>

Para hacerlo primero tenemos que asignar el Id de nuestro span a una variable:

let spanMascotaJugador = document.getElementById('mascota-jugador')

Ahora tenemos que asignale un valor nuevo y que este se escriba en el HTML

spanMascotaJugador.innerHTML = 'Hipodoge'

Jajaja ¡¡Poooom!!

Me gusto mucho la participación del profe en Dune. :3

Todo es cuestion de practicar y praticar para que se te quede grabada la infomacion. Tambien ayuda bastante colocando notas para saber porque hiciste tal cosa.

En VSCode para agilizar la escritura cuando vas a asignar un “id” dentro de por ejemplo el “span” lo podes automatizar escribiendo # entre medio, por ejemplo:
span#mascota-jugador te queda <span id=“mascota-jugador”></span>

Excelente clase y forma de explicar!

Con Bootstrap se me olvidaron muchos fundamentos y el por que me gusta maquetar ahora con este curso lo recordé ! aparte bootsrap no he tenido experiencias 100% efectivas para el maquetado.

innerHTML una propiedad para manipular el DOM

Buenos días desde España, me encanta las clases del profesor Juan David son muy amenas y agradables me motiva a no parar de aprender.

Excelente Profe

Excelente la manera en la que enseñas, en dos dias he aprendido mas de javascript aca que de lo que he estado aprendiendo en dos meses… Gracias