Escuchando eventos con JavaScript

les recomiendo los Cursos de React.js: Manejo Profesional del Estado y el Curso de Frameworks y Librerías de JavaScript los imparte el prode Juan 💚

Como dato, al hacer addEventListener no es necesario definir la función por separado. Podemos hacer esto:

document.addEventListener('click', () => {
	alert("SELECCIONASTE TU MASCOTA")
}) 

A veces será más cómodo de una forma, otras veces será más claro de la otra. Úsenlo con sabiduría

Así hice la función

function seleccionarMascotaJugador(){
    if (document.getElementById("hipodoge").checked == true){
        alert("Usted ha seleccionado hipodoge")
    }
    else if (document.getElementById("capipepo").checked == true){
        alert("Usted ha seleccionado capipepo")
    }
    else if (document.getElementById("ratigueya").checked == true){
        alert("Usted ha seleccionado ratigueya")
    }
}

Al inicio del html podemos utilizar defer, esto realiza que despues de cargado se ejecute el JS:
<script src="./js/main.js" defer></script>

Comparto mi avance:

function confirmarSeleccionJugador1() {
    if(document.getElementById('ajolote').checked) {
        alert('Has seleccionado al ajolote')
    } else if(document.getElementById('topo').checked) {
        alert('Has seleccionado al topo')
    } else if(document.getElementById('hormigadefuego').checked) {
        alert('Has seleccionado a la Hormiga de fuego')
    } else if(document.getElementById('komodo').checked) {
        alert('Has seleccionado al Dragón de Komodo')
    } else if(document.getElementById('tortuga').checked) {
        alert('Has seleccionado a la tortuga')
    } else if(document.getElementById('caballodemar').checked) {
        alert('Has seleccionado al Caballo de mar')
    } 
}

Lo realize usando la logica que nos dejo Freddy.

if (document.getElementById("hipodoge").checked) {
    alert("Haz seleccionado a Hipodoge 🦭");
  } else if (document.getElementById("capipepo").checked) {
    alert("Haz seleccionado a Capipepo 🦫");
  } else if (document.getElementById("ratigueya").checked) {
    alert("Haz seleccionado a Ratigueya 🐀");
  }else {alert("Ninguna mascota seleccionada")}

investigando encontre otra forma de evaluar el grupo de botonos, pero no supe si es posible realizarlo desde este ambito, dejo el codigo encontrado.

if (document.querySelector('input[name="mascota"]:checked') = hipodoge) 

Yo lo hice así

Con el atributo checked pueden seleccionar un personaje por defecto al iniciar la carga de la página, así:

      <input type="radio" name="mascota" id="hipodoge" checked/>

Me costo bastante pero encontré como meterlo todo en una función en vez de usar varios alert💚💚

decidí guardar las macotas en un array para acceder a ellos con un for, trate de optimizar el codigo para que no sea repetitivo

// alert("hello world");

// Pets
mascotas=[
"hipodoge","capipepo","ratigueya","langostelvis","tucapalma","pydos"
];

// Game
function iniciarJuego(){
    let seleccionarMascota = document.getElementById('seleccionarMascota');

    seleccionarMascota.addEventListener('click', seleccionarMascotaJugador);

    function seleccionarMascotaJugador(){
        for(let mascota of mascotas ){
            let elementMascota = document.getElementById(mascota);

            if(elementMascota.checked){
              var  mascotaSeleccionada = mascota;
            }
        }
        if(mascotaSeleccionada == null || mascotaSeleccionada == undefined){
            alert('Por favor selecciona una mascota.');
        }else{
            alert('seleccionaste tu mascota : ' + mascotaSeleccionada);
        }

    }
}
window.addEventListener('load', iniciarJuego);

Debo de aceptar que los últimos dos vídeos no me habían querido dar los códigos, y estaba frustrada, pero es bueno siempre tener la opción de preguntas en el panel, porque ya hay muchas respuestas solucionadas allí, lo cuál hace que uno busque y busque, y busque hasta encontrar el posible error…No ha sido del todo fácil pero debo de aceptar que la satisfacción cuando van saliendo las cosas como debe ser es inigualable. Así que esto para expresar que me siento muy feliz de estar aprendiendo aquí con todos ustedes, gracias. 💛

Yo le agregué un condicional mas para cuando no selecciona ningún input.

function seleccionarMascotaJugador() {
    if (Ipodoge.checked)
        alert("SELECCIONASTE A IPODOGE")
    else if (Capipego.checked)
        alert("SELECCIONASTE A CAPIPEGO")
    else if (Ratigueya.checked)
        alert("SELECCIONASTE A RATIGUEYA")
    else 
    alert("NO SELECCIONASTE MASCOTA")
}

Quizás está de mas pero por las dudas lo puse. No se que opinan.

me encanta programar

No tenia idea del “checked”!! Muy buena.

Así resolví el código. Hasta ahora desconozco si es válido declarar una variable con un valor de cero, como lo hice en el código, para luego ser sustituido por la selección de la mascota.

Así hice mi solución, Básicamente utilizo una función que recibe como parámetro una mascota, válida si esta está seleccionada, y luego devuelve el resultado de esa validación (true or false).
Luego en el condicional, llamo esta función enviando como argumento cada una de las mascotas, si alguna resulta seleccionada, la función devolverá TRUE, por lo que se ejecutará alert("SELECCIONASTE TU MASCOTA: ...mascota..."). También puse la excepción donde el usuario aún no ha hecho ninguna selección.
.

PD: La extensión de VSCode para tomar la foto se llama codesnap, una vez instalada, puedes acceder a ella a través del comando ctrl + p luego el signo de mayor que (>) y escribes codesnap. Por último seleccionas el código y ya puedes tomar la foto, solo queda guardarla y listo! 💚

la verdad no entiendo nada

No les pasa que: Toma tu true jejejejeej muy excelente manera de enseñar además de muy dinamica

Por insipración de un compañero de Platzi empecé a tomar mis notas desde Notion. Espero ser clara y que a alguien les sirva 😃 apenas empecé en la lección anterior.

Hola buenas tardes, les quiero comentar dos errores que tuve en esta clase y que por suerte los pude resolver. Se los comento por si a alguien le llega a pasar lo mismo. Adjunto imagen.
El primero fue con el editor, en vez de poner .addEventListener, escribi .addEvenListener. Un error de tipeo(faltaba la t)que no lograba encontrar hasta que mire el codigo palabra por palabra.

Otro error que me surgio fue en la consola del navegador, el error me decia: DevTools failed to load source map: Could not load content for chrome-extension:
Y esto es porque tenia habilitadas 2 extensiones en el navegador y por esto no me salia los alertas de js.

Sería súper agregar un

else{
}

Al final por si el usuario no selecciona ninguna de las opciones

Yo solo nombre a las mascotas por Numero y le agregue un While para reducir el codigo:

Muchachos, igual lo más importante aquí es encomendarnos a los dioses del internet porque ajá…🤣

sorprendente lo solucione antes de ver la lógica algo anda bien por acá

ESTA FUE MI SOLUCIÓN

Toma tu True! 😂

Imagino que se pueden cambiar minúsculas por mayúsculas.
Si es así haria una sola fn con un alert ("elegiste a " + MASCOTA)

Aqui esta el reto que dejo el profesor, espero que este bien.
![](

![](

Es increible la forma en que se escuchan los eventos en JS, es interesante. La primera vez que lo vi en mi chamba, estaba perdido. Ahora por fin me quedo claro. Espero seguir aprendiendo de este codigo.

ESTA FUE MI SOLUCION AL PROBLEMA, ESTOY ESCRIBIENDO ESTO ANTES DE VER LA SOLUCION DEL PROFE ¿, PERO CREO QUE ESTA PUEDE FUNCIONAR.

function seleccionarMascota(){
   let hipodogue = document.getElementById("hipodogue");
   let capipepo = document.getElementById("capipepo");
   let ratigueya = document.getElementById("ratigueya");

   if (hipodogue.checked == true) {
        alert("La Mascota Seleccionada Ha Sido: HIPODOGUE")
   }

   else if(capipepo.checked == true){
        alert("La Mascota Seleccionada Ha Sido: CAPIPEPO");
   }

   else if(ratigueya.checked == true){
        alert("La Mascota Seleccionada Ha Sido: RATIGUEYA");
   }
   else{
    alert("🚩POR FAVOR SELECCIONE ALGUNA DE LAS MASCOTAS DISPONIBLES");
   }
}

Hasta ahora los conceptos más interesantes que he conocido hasta ahora han sido los

addEventListener, getElementById

Y como interactúan las funciones después de ser validadas por la función Window.addEventListener(‘load’)

Me ha parecido genial

Mi propuesta a esta parte del algoritmo

function iniciarJuego(){
    let botonMascota = document.getElementById('boton-mascotas');
    botonMascota.addEventListener('click', seleccionarMascota);
}

function seleccionarMascota(){
    let hipodoge     = document.getElementById('hipodoge');
    let capipepo     = document.getElementById('capipepo');
    let ratigüeya    = document.getElementById('ratigüeya');
    let langostelvis = document.getElementById('langostelvis');
    let tucapalma    = document.getElementById('tucapalma');
    let pydos        = document.getElementById('pydos');
    let seleccionado = '';
    if(hipodoge.checked){
        seleccionado = hipodoge.id;
    }else if(capipepo.checked){
        seleccionado = capipepo.id;
    }else if(ratigüeya.checked){
        seleccionado = ratigüeya.id;
    }else if(langostelvis.checked){
        seleccionado = langostelvis.id;
    }else if(tucapalma.checked){
        seleccionado = tucapalma.id;
    }else if(pydos.checked){
        seleccionado = pydos.id;
    }
    alert(`Seleccionaste a ${seleccionado}`);
}

window.addEventListener('load', iniciarJuego);

My code (/ω＼)

function iniciarJuego(){
    let botonElegir = document.getElementById('boton-elegir')
    botonElegir.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador() {
    
    let hipodoge = document.getElementById('hipodoge')
    let capipepo = document.getElementById('capipepo')
    let ratagueya = document.getElementById('ratagueya')
    
    if (hipodoge.checked) {
        alert('Elegiste a Hipodoge! 💦')
    } else if (capipepo.checked) {
        alert('Elegiste a Capipepo 🌱')
    } else if (ratagueya.checked) {
        alert('elegiste a Ratugueya 🔥 ')
    } else {
        alert('Por favor elige una mascota! 🤔')
    }

}

window.addEventListener('load', iniciarJuego)

Yo intente de esta manera. No me funciono jaja pero en mi cabeza hacia sentido. Ya estoy continuando la clase para ver cual fue mi posible error. Algo me dice que no se pueden poner condicionales If dentro de una función jaja
function seleccionarMascotaJugador(hipodoge, capipepo, ratigueya) {
if (seleccionarMascotaJugador == hipodoge) {
alert(“Seleccionaste a Hipodoge”);
} else if (seleccionarMascotaJugador == capipepo) {
alert(“Seleccionaste a Capipepo”);
} else if (seleccionarMascotaJugador == ratigueya) {
alert(“Selccionaste a Ratigueya”);
} else {
alert(“Elige una opcion”);
}
}

Se me ocurrió esta solución antes de continuar con la explicación de Juan (aún no quito la pausa xD):

function iniciarJuego() {
    //variables
    let botonMascotaJugador = document.getElementById('boton-mascota')

    //eventos
    botonMascotaJugador.addEventListener('click', seleccMascotaJugador)
}

function seleccMascotaJugador() {
    let inputHipodoge = document.getElementById('hipodoge')
    let inputCapipepo = document.getElementById('capipepo')
    let inputRatigueya = document.getElementById('ratigueya')
    let mascotaActual = ""

    if (inputHipodoge.checked) {
        mascotaActual = "Hipodoge"
        alert("Has a selccionado a " + mascotaActual)
    } else if (inputCapipepo.checked) {
        mascotaActual = "Capipepo"
        alert("Has a selccionado a " + mascotaActual)
    } else if (inputRatigueya.checked) {
        mascotaActual = "Ratigüeya"
        alert("Has a selccionado a " + mascotaActual)
    } else {
        alert("Selecciona tu mascota")
    }
}

window.addEventListener('load', iniciarJuego)//otra manera de llamar al script después de que se cargue todo el HTML
//la función iniciarJuego se carga cuando ya todo el contenido está cargado.

Mi solución

Antes de ver la solución del profe les comparto la mía 😄, cualquier aporte es bienvenido.

function seleccionarMascotaJugador(){

let hipodoge = document.getElementById('hipodoge');
let capipepo = document.getElementById('capipepo');
let ratigueya = document.getElementById('ratigueya');

if(hipodoge.checked){
    alert('Seleccionaste a Hipodoge');
}else if(capipepo.checked){
    alert('Seleccionaste a Capipepo');
}else if(ratigueya.checked){
    alert('Seleccionaste a Ratigueya');
}

}

🐭 ¡Logré hacer que el botón de seleccionar mascota reconociera el animal!

Es simple, creamos condicionales que nos lleven a lanzar el alert de ‘¡Elegiste (mascota)’. Lo más importante es que las condiciones comparen la propiedad de checked: Si esto es true, lanza esta alerta.

Anyway, aquí les dejo el código y el resultado 💚:

Este es mi fi function para seleccionar la mascota.

¿Funciona? Si 😁
¿Es la manera correcta de hacerlo? Probablemente no 😂

function seleccionarMascotaJugador() {
       if (document.getElementById("Hidrocap").checked)
        alert("Has seleccionado a HIDROCAP")
       else if (document.getElementById("Geoter").checked)
        alert("Has seleccionado a GEOTER")
       else if (document.getElementById("Draganis").checked)
        alert("Has seleccionado a DRAGANIS")
       else if (document.getElementById("Marleon").checked)
        alert("Has seleccionado a MARLEÓN")
       else if (document.getElementById("Barreon").checked)
        alert("Has seleccionado a BARREÓN")
       else if (document.getElementById("Vulcano").checked)
        alert("Has seleccionado a VULCANO")
}

No pude completar el desafio 😔

<function seleccionarMascotaJugador(){
    let mascota = ""
    alert("SELECCIONASTE LA MASCOTA " + mascota)

    let hipodoge = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('hipodoge').checked
    let ratigueya = document.getElementById('hipodoge').checked

    if (hipodoge == true){
        mascota = "HIPODOGE"
    }else if (capipepo == true){
        mascota = "CAPIPEPO"
    }else if (ratigueya == true){
        mascota = "RATIGUEYA"
    }
}




function iniciarJuego(){
    let botonMascotaJugador = document.getElementById('boton_mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}



window.addEventListener('load', iniciarJuego)> 

No se si estará bien, pero yo lo hice de esta forma.!

7:33 #TomaTutru

Me adelanté un poco y aplicando las clases pasadas agregué la selección del enemigo

function play(){
    let botonMascotaJugador = document.getElementById('boton-mascota')
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador(){
    if ((document.getElementById("hipofusen").checked == true)){
        alert('Seleccionaste a Hipofusen 🐡🌊' )
    } else if ((document.getElementById("terrarata").checked == true)){
        alert('Seleccionaste a Terrarata 🐀🏔️' )
    }else if ((document.getElementById("tigerfire").checked == true)) {
       alert('Seleccionaste a Tigerfire 🐅🔥' )
    }else {
        alert('No has seleccionado')
    }

    let pc = 0
    pc = Math.floor(Math.random()*(3-1+1)+1)
    if (pc == 1){
        alert('El enemigo seleccionó a Hipofusen 🐡🌊' )
    } else if (pc == 2){
        alert('El enemigo seleccionó a Terrarata 🐀🏔️' )
    }else if (pc == 3) {
    alert('El enemigo seleccionó a Tigerfire 🐅🔥' )
    }
}


window.addEventListener('load', play)

)

Yo lo hice asi 😄

function seleccionarMascotaJugador(){

   if (document.getElementById("Piplup").checked){
        alert("Piplup yo te elijo !! ")
   } else if  (document.getElementById("Sandile").checked) {
        alert("Sandile yo te elijo !!")
   } else if (document.getElementById("Litten").checked){
        alert("Litten yo te elijo")
   } else if (document.getElementById("Volcanion").checked) {
        alert("Volcanion yo te elijo !!")

   }else if (document.getElementById("Swampter").checked) {
        alert("Swampter yo te elijo")
   } else if (document.getElementById("Heatmor").checked) {
        alert("Heatmor yo te elijo")
   } else {
    alert ("NO ELEGISTE A TU MOKEPON")
   }
   }

function seleccionarMascotaJugador() {

    if (document.getElementById('Hipodego').checked == true){
        alert('Seleccionaste Tu Mascota  Hipodego')
    }
    if (document.getElementById('Capipego').checked == true){
    
        alert('Seleccionaste Tu Mascota  Capipego ')
    }
    if (document.getElementById('Ratigueya').checked == true){
    
        alert('Seleccionaste Tu Mascota  Ratiguey')
    }
    if (document.getElementById('Thor').checked == true){

Aquí mi aporte. Cree variables para no repetir tantas veces el addEventListener. Y use querySelector que es otra forma de llamar clases, id, etc desde el documento html al del javascript.

const hipodoge = document.querySelector('#hipodoge');
const capipepo = document.querySelector('#capipepo');
const ratigueya = document.querySelector('#ratigueya');

function iniciarJuego(){
    let botonMascotaJugador = document.querySelector('#boton-mascota');
    botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}

function seleccionarMascotaJugador(){
    if(hipodoge.checked == true){
        alert('Usted ha seleccionado a Hipodoge')
    }
    else if(capipepo.checked == true){
        alert('Usted ha seleccionado a Capipepo')
    }
    else if(ratigueya.checked == true){
        alert('Usted ha seleccionado a Ratigueya')
    }
    else{alert('Por favor selecciona una mascota')}
}

window.addEventListener('load', iniciarJuego)
<code> 

📌 Escuchar las propiedades de las etiquetas HTML son útiles para JS

function seleccionarMascotaJugador() {
    if (document.getElementById('hipodogue').checked == true) {
        alert("Seccionaste a HipoDoge")
    }else if (document.getElementById('capipepo').checked == true) {
        alert("Seccionaste a CapiPepo")
    }else if (document.getElementById('ratigueya').checked == true) {
        alert("Seccionaste a RatiGueya")
    }
}

Que gratificane haberlo logrado!!!
Aqui mi humilde codigo colegas

function seleccionarMascotaJugador(){
    if(document.getElementById('hipodoge').checked){
        alert('SELECCIONASTE A HIPODOGE!')
    } else if(document.getElementById('capipepo').checked)
	{
        alert('SELECCIONASTE A CAPIPEPO!')
    } else if(document.getElementById('ratigueya').checked){
        alert('SELECCIONASTE A RATIGUEYA!')
    } else if(document.getElementById('langoselvis').checked){
        alert('SELECCIONASTE A LANGOSELVIS!')
    } else if(document.getElementById('tucapalma').checked){
        alert('SELECCIONASTE A TUCAPALMA!')
    } else if(document.getElementById('pydos').checked){
        alert('SELECCIONASTE A PYDOS')
    } else {
        alert('ELIJE TU MASCOTA')
    }
}

Yo lo hice de ésta manera, usando lo mas básico If Else

no se por que razon a mi me manda error cuando muevo todo a la funcion

hola chicos yo soy nuevo, la verdad quería expresar mi emoción con ustedes porque acerte las condicionales “if” y "else if"
pd: si lees esto tu también vas por buen camino

Literal pause la clase e hice esto bien o mal ahi vamos :v al menos funciono jajaja

¿Qué diferencia async y defer en JavaScript?

Los elementos <script> son unos de los recursos más comunes que bloquean el análisis y renderizado de un documento HTML. Cuando el navegador se encuentra con este tipo de recursos, detiene el análisis del documento, descarga el recurso, lo ejecuta y luego continua con el análisis del documento.
.
Una de las primeras recomendaciones para evitar este bloqueo era colocar los elementos <script> al final del HTML, por ejemplo antes del </body> o de </html>. De esta forma, cuando el analizador se encontraba con los scripts, casi todo el documento ya se había analizado y renderizado. Pero era una solución lejos de ser ideal.
.
Los atributos async y defer, introducidos en HTML5, ofrecen la flexibilidad necesaria para solucionar este problema sin forzarnos a colocar los scripts en un sitio concreto del documento, con ligeras pero importantes diferencias:
.

1. <script> (normal): el análisis HTML se detiene, se descarga el archivo (si es un script externo), se ejecuta el script y después se reanuda el análisis HTML.
   .
2. <script async>: el script se descarga de forma asíncrona, es decir, sin detener el análisis HTML, pero una vez descargado, si se detiene para ejecutar el script. Tras la ejecución se reanuda el análisis HTML. Sigue existiendo un bloqueo en el renderizado pero menor que con el comportamiento normal. No se garantiza la ejecución de los scripts asíncronos en el mismo orden en el aparecen en el documento.
   .
3. <script defer>: el script se descarga de forma asíncrona, en paralelo con el análisis HTML, y además su ejecución es diferida hasta que termine el análisis HTML. No hay bloqueo en el renderizado HTML. La ejecución de todos los scripts diferidos se realiza en el mismo orden en el que aparecen en el documento.
   .
   
   
   .
   Nota: async y defer son atributos válidos solo para elementos <script> con un src establecido, es decir, para scripts externos o con data URIs. En el caso de scripts inline (es decir, código JavaScript escrito dentro del mismo documento HTML) no tienen efecto y son analizados y ejecutados al llegar a ellos.
   .

¿Cuándo utilizar cada uno? (En esta última parte pues está bueno saberlo, pero para el nivel actual me parece letra china😵)
.
defer parece la mejor opción de forma general. Salvo que el script manipule o interaccione con el DOM antes de DOMContentLoaded ($( document ).ready en jQuery). También sería la mejor opción si el script tiene dependencias con otros scripts y es importante el orden en el que se ejecuta cada uno.
.
async sería ideal para scripts que manipulan o interaccionan con el DOM antes de DOMContentLoaded y/o que no tienen dependencias con otros scripts.
.
Seguir utilizando JS en su forma predeterminada sería la última opción. Si el script es pequeño, preferible inline, ya que el análisis HTML se detendría pero sería una interferencia muy pequeña en comparación con la solicitud y descarga del archivo.
.
SIGAMOS APRENDIENDO JUNTOS💚

el codigo que yo utilice para saber que personaje escogia el usuario es :

function seleccionarPersonajeJugador(eleccionPersonaje){
        let personaje = ""
        if(document.getElementById("input1").checked){
                personaje = "input 1"
        }
        else if(document.getElementById("input 2").checked){
                personaje = "input 2"
        }
        else if(document.getElementById("input 3").checked){
                personaje = "input 3"
        }
        else {
                personaje = "escoge un personaje"
        }
        alert("seleccionaste a " + personaje)
}

windows.addeventlistener(‘load’, nombrefuncion) --> permite ejecutar luego de que termine de cargar la web

Esta fue mi solución para saber que mascota habia seleccionado el usuario.

function eventos_elementos()
{
    var boton_mascota = document.getElementById('seleccionar')
    boton_mascota.addEventListener('click', seleccionarMascota)
    var Hipodoge = document.getElementById('Hipodoge').checked
    var Capipepo = document.getElementById('Capipepo').checked
    var Ratigueya = document.getElementById('Ratigueya').checked
    var Langostelvis = document.getElementById('Langostelvis').checked
    var Tucapalma = document.getElementById('Tucapalma').checked
    var Pydos = document.getElementById('Pydos').checked
    let radios = [Hipodoge,Capipepo,Ratigueya,Langostelvis,Tucapalma,Pydos]
    return radios
}

function seleccionarMascota()
{
    var llamar = eventos_elementos();
    console.log(llamar)
    switch(llamar !== true)
    {
        case llamar[0]:
        alert("haz seleccionado a hipodoge")
        break;
        case llamar[1]:
        alert("haz seleccionado a Capipepo")
        break;
        case llamar[2]:
        alert("haz seleccionado a Ratigueya")
        break;
        case llamar[3]:
        alert("haz seleccionado a Langostelvis")
        break;
        case llamar[4]:
        alert("haz seleccionado a Tucapalma")
        break;
        case llamar[5]:
        alert("haz seleccionado a Pydos")
        break;
        default:
        alert("no haz seleccionado nada mamahuevo")
        break;   
    }
}

window.addEventListener('load', eventos_elementos)

Hola a todos!!
creo que no fue la mejor manera de solucionarlo, pero esto fue lo que programe.

Pensé en la misma solución del profesor, pero creo que me estoy arrepintiendo de que mi juego tenga 10 opciones para elegir :’)

Este es mi aporte para no recorrer cada input traje los elementos en un nodelist con el nombre .

function seleccionarMascotaJugador() {
    let pet = document.getElementsByName("pet")
    for (let index = 0; index < pet.length; index++) {
        if (pet[index].checked) {
            return alert(` seleccionaste ${pet[index].id}`)
        }
    }
}

Lo resolví así:

function iniciarJuego(){
let botonMascotaJugador = document.getElementById(‘boton-mascota’)
botonMascotaJugador.addEventListener(‘click’, seleccionarMascotaJugador)
}

function seleccionarMascotaJugador(){

if(document.getElementById('hipodoge').checked== true){
    alert("Seleccionaste a Hipodoge");
}
else if(document.getElementById('capipepo').checked== true){
    alert("Seleccionaste a Capipepo");  
    }
else if(document.getElementById('ratigueya').checked== true){
    alert("Seleccionaste a Ratigueya");  
}
else{
    false; 
}

}

tengan mucho cuidado con las mayusculas, sin querer puse la palabra window en mayuscula y dure media hora buscando el error jajaja

Casi que NO, se me habia ido una letra S en boton-mascota y no me aparecia el pop-up #ojodeAguila

MINUTO 4:59. “estas funciones no las estamos llamando en ningun momento. Unicamente las estamos llamando cuando el navegador nos da el evento de que se cargo todo el html”,
excelente explicacion

Asi realice el ejercicio de crear la función seleccion de mascota con lo que aprendí del profe freddy( aun no veo como lo hizo el profe Juan)

La forma para no tener muchas validaciones puede ser esta

const buttonPet = document.getElementById('buttonPet');
if (buttonPet) {
    const selectPetPlayer = () => {
        const buttonSelected = document.querySelector(
            '[name="mokepon"]:checked'
        );
        console.log(buttonSelected);
    };
    buttonPet.addEventListener('click', selectPetPlayer);
}

Solo traemos el mokepon seleccionado y nos ahorrariamos las validaciones

Así es como lo hice yo :’))

function seleccionarMascotaJugador() {
    //alert('SELECCIONASTE TU MASCOTA')
    hipodogue = document.getElementById('hipodoge').checked
    capipepo = document.getElementById('capipepo').checked
    ratigueya = document.getElementById('ratigueya').checked

    if (hipodogue == true) {
        alert('seleccionaste a hipodogue')
    } else if (capipepo == true) {
        alert('seleccionaste a capipepo')
    } else if (ratigueya == true) {
        alert('seleccionaste a ratigueya')
    } else {
        alert('No has seleccionado nada')
    }

Resolví el problema de selección del mokepon de esta manera.
usando una estructura condicional:

function seleccionarMascotaJugador() {
    if (document.getElementById("hipodoge").checked) {
        alert("Seleccionaste a hipodoge")
    } else if (document.getElementById("capipepo").checked) {
        alert("Seleccionaste a capipepo")
    } else if (document.getElementById("ratigueya").checked) {
        alert("Seleccionaste a ratigueya")
    } else if (document.getElementById("langostelvis").checked) {
        alert("Seleccionaste a langostelvis")
    } else if (document.getElementById("tucapalma").checked) {
        alert("Seleccionaste a tucapalma")
    } else if (document.getElementById("pydos").checked) {
        alert("Seleccionaste a pydos")
    }
}

Asi es como lo pude hacer:

Primero: lo que hice fue crear una variable para cada uno de los Monstruos en JS con document.getElementById.
Segundo: dentro de la funcion SeleccionMonstruo cree las condicionales, si el Monstruo de fuego era seleccionado (‘checked’), saldria una alerta de que lo seleccione, sino saldrian los demas.
Tercero: sino se selecciono ninguno de los Mosntruos y le dimos directamente a Seleccionar, nos saldra que “No Seleccionaste a Nadie”.

Este fue el intento de solución a la clase.

function seleccionarMascotaJugador(){
    let mascota1 = document.getElementById('Hipologe').checked
    let mascota2 = document.getElementById('Capipepo').checked
    let mascota3 = document.getElementById('Ratigueya').checked

    if (document.getElementById('Hipologe').checked == true){
        alert("Has seleccionado Hipologe ")
    } else if (document.getElementById('Capipepo').checked == true){
        alert("Has seleccionado Capipepo  ")
    } else if (document.getElementById('Ratigueya').checked == true){
        alert("Has seleccionado Ratigueya ")
    } 

}

Tuve que regresar a revisar la intrucción if y me dio una idea.

Mi solucion fue esta, y ademas le agregue una cuarta opcion que es cuando el usuario no selecciona ningun mokepon, me llevo como 15 minutos pensarlo jajaja que novato soy <(T_T)>

<code> 
function seleccionarMascotaJugador() {
 if(document.getElementById("hipodoge").checked == true)
 alert("SELECCIONASTE A HIPODOGE!")
 else if(document.getElementById("capipepo").checked == true)
 alert("SELECIONASTE A CAPIPEPO!")
 else if(document.getElementById("ratigueya").checked == true)
 alert("SELECIONASTE A RATIGUEYA!")
 else {
    alert("SELECIONA TU MOKEPON!")

excelente clase!!!

(·_·)

Mi aporte a como puede ser solucionado

function checkElement(id) {
    return document.getElementById(id).checked;
}

function selectPlayerPet() {
    let pet = '';

    checkElement('hipodoge') ? pet = "Hipodoge" :
    checkElement('capipepo') ? pet = "Capipepo" :
    pet = "Ratigueya";

    alert("Elegiste a: " + pet)
}

creo que esta forma es simple pero útil siendo la más básica para partir

function seleccionarMascotaJugador() {
    if (document.getElementById('hipodoge').checked){
        alert("Seleccionaste a Hipodoge 🦛💧")
    } else if(document.getElementById('capipepo').checked){
        alert("Seleccionaste a Capipepo 🦫🌱")
    } else if(document.getElementById('ratigueya').checked){
        alert("Seleccionaste a Ratigueya 🐀🔥")
    } else {
        alert("No seleccionaste a ninguna mascota ☠️")
    }
}

Yo lo elaboré de esta manera, donde creo que también es una buena alternativa, las funciones las aprendí en el anterior curso de programación básica

// Inicio dek juego
addEventListener("load",inicioJuego)
// arreglo donde guardaremos los mokepones, y la variable para
// manipular el nombre
let inputmokepon = [];
let nameMokepon

function inicioJuego()
{
    // obtenemos el boton desde el archivo html
    let botonMokepon = document.getElementById("mokepon");
    botonMokepon.addEventListener("click",seleccionMokepon);

    // los añadimos al final del arreglo con la funcion push
    inputmokepon.push(document.getElementById("hipodoge"))
    inputmokepon.push(document.getElementById("capipepo"))
    inputmokepon.push(document.getElementById("ratigueya"))
    inputmokepon.push(document.getElementById("langostelvis"))
    inputmokepon.push(document.getElementById("tucapalma"))
    inputmokepon.push(document.getElementById("pydos"))

    
}

function seleccionMokepon()
{
    /* Este tipo de for recorre todo un arreglo y el 
    indice lo guardamos en la variable i */
    for(var i in inputmokepon)
    {
        if(inputmokepon[i].checked == true)
        {
            // guardamos el id como un string que contiene el nombre en la variable
            nameMokepon = inputmokepon[i].id
            nameMokepon = nameMokepon.charAt(0).toUpperCase()+nameMokepon.slice(1)
            /* El metodo charAt obtiene la priemra letra del string
            y el metodo toUpperCase la convierte a mayuscula, ademas el
            metodo slice corta el sobrante a partir de la posicion*/
            alert("Seleccionaste a "+nameMokepon)
        }
        else
        {
            // si el usuario no ha seleccionado nada, con el break
            // finalizamos el ciclo for
            alert("No seleccionaste nada")
            break 
        }
    }
}

El profe Juan es el mejor

deje de estudiar en el colegio para estudiar con los mejores profes 😃

Hola:

Aquí comparto mi solución para seleccionar a nuestra mascota:

function seleccionaMascotaJugador(nombreMascota){
  let selHipodoge=document.getElementById("hipodoge");
  let selCapipepo=document.getElementById("capipepo");
  let selRatigueya=document.getElementById("ratigueya");

  if (selHipodoge.checked){
    nombreMascota="Hipodoge"
  }
  else if (selCapipepo.checked){
    nombreMascota="Capipepo"
  }
  else if (selRatigueya.checked){
    nombreMascota="Ratigueya"
  }
  alert("Seleccionaste a " + nombreMascota);
}

function iniciarJuego(){
  let botonMascotaJugador=document.getElementById("boton_mascota");
  botonMascotaJugador.addEventListener("click", seleccionaMascotaJugador);
}

window.addEventListener("load", iniciarJuego);

Me gustaría mucho conocer sus opiniones 😄.

Asi lo hice!!

function iniciarJuego() {
  alert("Carga la pagina");
  let botonMascotaJugador = document.getElementById('boton-mascota');
  botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);
}

function seleccionarMascotaJugador() {
    //Accedo a las opciones
  let hipodoge = document.getElementById('hipodoge')
  let capipepo = document.getElementById('capipepo')
  let ratigueya = document.getElementById('ratigueya')

  if(hipodoge.checked){
    alert('Seleccionaste el hipodoge')
  }
  if(capipepo.checked){
    alert('Seleccionaste el capipepo')
  }
  if(ratigueya.checked){
    alert('Selecccionaste el ratigueya')
  }


}

window.addEventListener('load', iniciarJuego);

Así lograría ser el codigo para hipodoge

 if ((document.getElementById('hipodoge').checked)==true){
      seleccionarMascotaJugador = "Hipodoge"
    }

Hola a todos, yo lo solucione solo escribiendo el nombre de la mascota. checked en la funcion de seleecionarMascotaJugador, segun como lo escribi en el atributo id del input y me funciono, PD. los nombres de las mascotas son diferentes pero la logica es segun lo que vamos aprendiendo, exitos a todos 💪🏻

Juan David, gracias me encanta tu estilo

Este es mi Intento – 💧🔥🌱

Algo que no me quedo claro es que hariamos si el jugador no seleccciona ninguna opcion y preciona el boton defrente .

variable.addEventListener(“click”, funcionA) = Entendi que esto sirve para escuchar el evento y asignar que tipo de evento sera escuchado, en este caso “click” y con respecto al click cuando presione el jugador se le asignara una función como respuesta como podria ser un alert(“respuesta texto”).

document.getElementById(“aca-serespecifico”) = entendí que es para encontrar un elemento Id de html para ser traído a JavaScript, en el video se invoco a un button, con id=(“boton-mascota”)

 if (inputHipodoge.checked){
        //alert("Seleccionaste Hipodoge")
        spanMascotaJugador.innerHTML = "Hipodoge"

4:22 se le salieron los demonios con el boom

Así es mi solución

function seleccionarMascotaJugador() {
  let hipodoge = document.getElementById("hipodoge").checked;
  let capipepo = document.getElementById("capipepo").checked;
  let ratigueya = document.getElementById("ratigueya").checked;

  if (hipodoge === true) {
    alert("Seleccionó hipodoge ");
  } else if (capipepo === true) {
    alert("Seleccionó capipepo ");
  } else {
    alert("Seleccionó ratigueya");
  }
}

siempre se tiene el miedo cuando el profesor es cambiado por otra persona, ya que en la gran mayoría de veces pensamos que su pedagogía sera diferente y eso podría complicar un poco las cosas, pero en este caso fue lo contrario 😊 me gusta mucho la manera en que explica las clases y como nos genera distintas soluciones para el mismo problema. muchas gracias por tanta dedicación.

Esta es mi propuesta

function iniciarJuego() {
    function seleccionarMascotaJugador() {
        let hipodoge = document.getElementById("hipodoge").checked
        let capipepo = document.getElementById("capipepo").checked
        let ratigueya = document.getElementById("ratigueya").checked
    
        if (hipodoge == true) {
            alert("elegiste hipodoge")
        } else if (capipepo == true) {
            alert("Elegiste capipepo")
        } else if (ratigueya == true) {
            alert("Elegiste ratigueya")
        } else{
            alert("No elegiste nada")
        }
    }

    let btnMascota = document.getElementById("seleccionar")

    btnMascota.addEventListener("click", seleccionarMascotaJugador)
}

window.addEventListener("load", iniciarJuego)

Esta fue mi solución en código

function seleccionarMascotaJugador(){
    let mascota = ""
    if (document.getElementById("hipodoge").checked == true){
        mascota = "Hipodoge"
    } else if (document.getElementById("capipepo").checked == true){
        mascota = "Capipepo"
    } else if (document.getElementById("ratigueya").checked == true){
        mascota = "Ratigueya"
    } else {
        mascota = "NINGUNO"
    }
    
 return alert("Elegiste a: "+ mascota)
}

Esto me gusta demasiadoooooo, Juan DC GRACIAS por explicar todo de manera sencilla y agradable

Excelentes las explicaciones.
Muchas gracias…