addEventListener

la actitud del profe Juan siempre es muy contagiosa 😄

Juan:
“Selecciona una mascota”
.
Freddy:
“SELECCIONASTE PERDER”

Esta fue la forma en que lo hice ya que, else es como “si no es ninguna de las anteriores” y arrojo una alerta que diga que debe seleccionar una mascota.

Tambien puedes usar el signo de dolar para evitar todo eso del document.getElementById

Conforme avanzo en el curso me voy percatando de la importancia de contar con un pensamiento estructurado y lógico antes de poder avanzar con todo el proceso de desarrollo y escritura de código. Es un campo totalmente nuevo para mi y me está suponiendo un reto complejo, pero a la vez lo disfruto. Muchas gracias por las aportaciones querida comunidad.

La energía del profesor es muy contagiosa! Así uno se entusiasma mucho más a la hora de aprender. 😀💻

Mi solución, intente hacerla un poco más organizada:

Les comparto un algoritmo que hice para entender que esta sucediendo sin tanto código de por medio.

Este es mi código JS

Y por supuesto, Debería explicar algunas cosas!!

Yo llamo a las mascotas mokepones de una vez.

Esto que ves es un ARRAY

let mokepones = ['hipodoge', 'capipepo', 'ratigueya', 'langostelvis', 'tucapalma'] 

Es un elemento que guarda un conjunto de elementos. Puedes guardar entre estos corchetes [ ] tantos elementos como quieras, separados por comas y darles un nombre de variable. Pueden ser números, strings, objetos, funciones u otras variables.
Esto se va a mencionar seguramente mientras avance el curso, así que esto es un spoiler.

Anteriormente, ya vimos el ciclo while, y funciona así:
MIENTRAS(la condición se verdad){
Realiza una y otra vez este código
}

Yo uso el ciclo for que funciona asi:

La variable i es un valor que debe iniciar en 0. el ciclo se repetirá hasta que i valga 10, y en cada repetición a i se le sumara 1. Asi que lo que al inicio era 0 terminara siendo 10 en la décima repetición y terminara el ciclo.

Los array pueden usar muchos métodos para ser manipulados o leídos. El método length sirve para saber cuantos elementos tiene un array. Asi que al decir i = mokepones.lenth, como mokepones tiene 5 elementos, el _for _se repetirá 5 veces.

Luego está el operador ternario, una belleza de JavaScript. Funciona como el **if **, el if else y el else. Sería algo así:

talcosa es verdad ? haz esto : o esto es verdad ? haz esto otro : sino haz esto

Los dos puntos funcionan como un if else o como un _else _si al final no hay más condiciones.

charAt() devuelve el primer caracter de un string y toUpperCase() convierte todo un string en mayúsculas.

al usar slice(1) estamos haciendo que al string se le reste el primer caracter.

El profesor es muy talentoso. Comenzó muy joven. Es brillante. Pienso que tiene un gran futuro

Hola yo lo estoy creando de la misma manera pero con los personajes del dibujo animado “Avatar”

“Capipeo” jajajaja q gran clase

Lo siento, de niño era muy fan de Pokemón 😂

Una forma de reducir el codigo funcional con metodos mas avanzados.

iniciarJuego = () => {
let buttonMascotas = document.getElementById('button-mascotas');
    buttonMascotas.addEventListener('click',seleccionMascotas)
}

seleccionMascotas = () => {
// querySelectorAll genera un arreglo con todos los elementos similares 
let inputMascotas = document.querySelectorAll('#seleccionar-mascotas input')

let nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"]

//forEach es el metodo de recorrer un arreglo.
inputMascotas.forEach(function(valor, indice){
 if(valor.checked == true){
  alert(`Usted ha seleccionado ${nombresMascotas[indice]}`)
            }
        })
}

window.addEventListener('load', iniciarJuego)

El profe juan se llama como mi hijo , juan de 13 años voy hacer que sea un gran progamador

La verdad tenía la idea de como realizarlo pero no me daba por pequeños errores en mi código 🫤. Justo ahí es que me acuerdo de Freddy cuando dijo:

Programar es aprender a manejar la FRUSTRACIÓN Y NO RENDIRTE.

🚀 Así vamos:

Dejo por aquí mi aporte, una forma de reducir más el código.

**Excelente manera de explicar 😃 **
Gracias Profe Juan 😎❤

Algunas cosas hice mal, lo que mejor pude hacer fue verificar el Github en aportes y comparar mi código con el de el profe Juan, lo realice como veces por que no me daban unas cosas, lo que mas me motivaba era que si lograba arreglar cosas pequeñas poco a poco. pero si fue fundamental soportarme del GitHub y de la clase.

aquí mi código, pido disculpas si es exactamente como el del profe, prometo que cuando tenga mejor dominio volveré a publicar mi aporte desde mi experiencia.

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

        if (inputHipodoge.checked){
            alert("Seleccionaste a Hipodoge")
        } else if (inputCapipepo.checked) {
            alert("seleccionaste a Capipepo")
        } else if (inputRatigueya.checked) {
            alert("Seleccionaste a Ratigueya")
        } else {
            alert("Selecciona una mascota")
        }
    }  

OjO = El audio de la clase está muy bajo. No tienen que ajustar sus bocinas/audifonos.

Mi código del ejercicio en JS

Excelente, me gusta que avanzamos paso a paso para no confundirnos, aqui mi avance:

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')

    if(seleccionAjolote.checked) {
        alert('Has seleccionado al ajolote')
    } else if(seleccionTopo.checked) {
        alert('Has seleccionado al topo')
    } else if(seleccionHormigaDeFuego.checked) {
        alert('Has seleccionado a la Hormiga de fuego')
    } else if(seleccionKomodo.checked) {
        alert('Has seleccionado al Dragón de Komodo')
    } else if(seleccionTortuga.checked) {
        alert('Has seleccionado a la tortuga')
    } else if(seleccionCaballoDeMar.checked) {
        alert('Has seleccionado al Caballo de mar')
    } else {
        alert('Por favor, elige un Mokepon')
    }
}

Esto es lo que llevo al momento, los personajes son expresidentes de mi pais JAJA

Por si solos son unos memes, así que joya😂

Curiosamente en la parte de declaración de la variable Capipepo, al profe se le fue Capipeo… y le funcionó, por que en los lugares donde la usó, lo hizo también con el “error”.

Pero hay que estar muy pendientes, por que son typos (gazapos) dificiles de encontrar. (Dificultan el Debugging)

Me encanta la manera de hablar de Juan 😄

Activar el boton solo cuando se seleccione una mascota

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

function seleccionarMascotaJugador(boton) {
  boton.disabled = true

  function mascotaSeleccionada() {
    if (inputHipodoge.checked) {
      alert('Hipodoge')
    } else if (inputCapipepo.checked) {
      alert('Capipego')
    } else {
      alert('Ratigueya')
    }
  }

  function activarBotonSeleccionar() {
    boton.disabled = false
    boton.addEventListener('click', mascotaSeleccionada)
  }

  let inputHipodoge = document.querySelector('#hipodoge')
  let inputCapipepo = document.querySelector('#capipepo')
  let inputRatigueya = document.querySelector('#ratigueya')
  inputHipodoge.addEventListener('click', activarBotonSeleccionar)
  inputCapipepo.addEventListener('click', activarBotonSeleccionar)
  inputRatigueya.addEventListener('click', activarBotonSeleccionar)
}

window.addEventListener('load', iniciarJuego)

De esta forma lo hice yo.

window.addEventListener("load", () =>{
    const btnSeleccionar = document.getElementById("btn-mascota");
    btnSeleccionar.addEventListener("click", ()=>{
        const radioHipoDoge = document.getElementById("hipodoge");
        const radioCapipepo = document.getElementById("capipepo");
        const radioRatigueya = document.getElementById("ratigueya");

        if(radioHipoDoge.checked){
            alert("seleccionaste a Hipodoge");
        }else if(radioCapipepo.checked){
            alert("seleccionaste a Capipepo");
        }else if(radioRatigueya.checked){
            alert("seleccionaste a Ratigueya" );
        }else{
            alert("selecciona un MOKEPON!");
        };
    });
})

Sin duda esta clase de programacion basica puede motivar a muchos 😃

Profe Juan, ud es chévere. Emite una gran energía que ánima a cualquiera a aprender y aprender sin dejar de parar. Un saludo desde Perú.

Me siento identificada con la actitud del Profe cada vez que todo sale bien 😁

Estoy feliz de tomar clases con Castro

Casi lloro de emoción porque sí puedo!!! programar es posible! y soy muy feliz
BTW deberían poner a este profe en muchos cursos

No lo voy a negar, me sentía raro cuando nos quitaron al profe Freddy, pero me encanta como explica el profe Juan David: Te detiene a pensar y que tu cerebro se mantenga activo y no solo estés prestando atención a lo zombie, además, cuando mi respuesta es similar a la que se esperaba me hace darme cuenta que SI estoy aprendiendo a pesar de lo que uno cree.

comparto otra forma de resolver el problema:

function iniciarJuego() {

    let botonMascota = document.getElementById('mascota')
    botonMascota.addEventListener('click', seleccionarMascotaJugador)

}


function seleccionarMascotaJugador() {

    let inputHipodogue = document.getElementById('Hipodoge');
    let inputCapipepo = document.getElementById('Capipepo');
    let inputRatigueya = document.getElementById('Ratigueya');
    let inputLangostelvis = document.getElementById('Langostelvis');
    let inputTucapalga = document.getElementById('Tucapalga');
    let inputPydos = document.getElementById('Pydos');

    switch (true) {

        case (inputHipodogue.checked): alert("Seleccionastes Hipodoge");
            break;
        case (inputCapipepo.checked): alert("Seleccionastes Capipepo");
            break;
        case (inputRatigueya.checked): alert("Seleccionastes Ratigueya");
            break;
        case (inputLangostelvis.checked): alert("Seleccionastes Langostelvis");
            break;
        case (inputTucapalga.checked): alert("Seleccionastes Tucapalga");
            break;
        case (inputPydos.checked): alert("Seleccionastes Pydos");
            break;
        default:alert("Selecciona Una Mascota");
        break;

    }

}


window.addEventListener('load', iniciarJuego)

Esta bueno porque si lo pensas de la siguiente forma, es sencillo:

let para setear variables al comienzo
if () para una condicion y lo que aparece despues entre {} para lo que queremos como resultado.
y todo eso que dije recien iria siempre dentro de una function (no se olviden la c, me paso!), para que pase algo, sino queda todo estatico.
Yo soy media dislexica asi que me sirve que aparezcan recomendaciones en Visual Studio jaja

A ver la clase unas cuantas veces más. Cada vez más se me complica más. Pero ahí vamos poco a poco. Gracias por la clase.

Yo lo hice de esta manera directa sin crear variables y funciona igual, el == true no es necesario pero lo deje por redundancia

function seleccionarMascotaJugador() {
    if(hipodoge.checked == true) {
        alert("Seleccionaste a hipo!")
    } else if (capipepo.checked == true) {
        alert("Seleccionaste a capipepo!")
    } else if (ratigueya.checked == true) {
        alert("Seleccionaste a ratigueya!")
    } else {
        alert("Necesitas seleccionar un Mokepon!")
    }
}

revisen bien la sintasix pase medio dia sin resolver por mayusculas y minusculas que cosas

Asi lo resolví :c

function seleccionarMascotaJugador(){
    let hipodoge = document.getElementById('hipodoge').checked
    let capipepo = document.getElementById('capipepo').checked
    let ratigueya = document.getElementById('ratigueya').checked
    let langostelvis = document.getElementById('langostelvis').checked
    let tucapalma = document.getElementById('tucapalma').checked
    let pydos = document.getElementById('pydos').checked

    if(hipodoge){
        alert('Seleccionaste el Hypodoge')
    }else if(capipepo){
        alert('Seleccionaste el Capipepo')
    }else if(ratigueya){
        alert('Seleccionaste Ratigueya')
    }else if(langostelvis){
        alert('Seleccionaste Langostelvis')
    }else if(tucapalma){
        alert('Seleccionaste Tucapalma')
    }else if(pydos){
        alert('Seleccionaste Pydos')
    }else{
        alert('Selecciona una opción valida')
    }
}

JuanDC he notado con Freddy, y ahora contigo, que no utilizan ni se menciono el uso del punto y coma en JS.
Han llegado a algun tipo de estandarización/acuerdo?

Hola! En varios lenguajes el (== ) sirve para igualar dos valores o variables. Y el (=) para asignarle un valor.
Puedes utilizar la igualación (==) para observar si el valor es verdadero o falso. Por lo tanto si el valor es igual a True (==True), la función se cumplirá. Esta fue la manera en la que lo realicé.

//Franco Paiz
function seleccionarMascotaJugador() {
    let hipodoge = document.getElementById('hipodoge')
    let capipepo = document.getElementById('capipepo')
    let ratigueya = document.getElementById('ratigueya')
    if (hipodoge.checked == true) {
        alert('Has seleccionado a Hipodoge!')
    } else if (capipepo.checked == true) {
        alert('Has seleccionado a Capipepo!')
    } else if (ratigueya.checked == true) {
        alert('Has seleccionado a Ratigueya!')
    } else {
        alert('ESCOGE UN POKEMON!')
    }
}```

He intentado reducir el número de palabras repetidas en los strings

Para ello he usado algunas variables que no estaban previstas en la clase. Mi idea era que sea más fácil actualizar o modificar los strings (quizá en una traducción). ¿Qué sería preferible esto o ahorrar recursos usando menos variables?

function seleccionarMascotaJugador(){
    
    let imputSeleccionado = ''
    let imputHipodoge = document.getElementById('hipodoge')
    let imputCapipepo = document.getElementById('capipepo')
    let imputRatigueya = document.getElementById('ratigueya')
    let imputLangostelvis = document.getElementById('langostelvis')
    let imputTucapalma = document.getElementById('tucapalma')
    let imputPydos = document.getElementById('pydos')
    
    if (imputHipodoge.checked){
        imputSeleccionado = 'Hipodoge'
    }else if (imputCapipepo.checked){
        imputSeleccionado = 'Capipepo'
    }else if (imputRatigueya.checked){
        imputSeleccionado = 'Ratigueya'
    }else if (imputLangostelvis.checked){
        imputSeleccionado = 'Langostelvis'
    }else if (imputTucapalma.checked){
        imputSeleccionado = 'Tucapalma'
    }else if (imputPydos.checked){
        imputSeleccionado = 'Pydos'
    }

    if (imputSeleccionado != ''){
        alert('Has seleccionado a ' + imputSeleccionado)
    }else
        alert('No has seleccionado ninguna mascota')
}

excelente. Me encata como va explicando Juan, me animo mucho más para seguir aprendiendo

a mi me funciono asi pero creo que el profe los guardo en variables para utilizarlos en otra funcion y no tener que hacer todo de nuevo.
function seleccionaMascotaJugador() {
if(hipodoge.checked){
alert(‘Elegiste a Hipodoge’)
}
if(capipepo.checked){
alert(‘Elegiste a Capipepo’)
}
if(ratigueya.checked){
alert(‘Elegiste a Ratigueya’)
}
}

para este ejersicio yo use el while en vez de muchos if que practicamente se repetian ps todos usaban la misma logica y por eso meparecio mejor idea usar un while y para facilar el trabajo, añadi un array:

let pets = [“pet1”, “pet2”,“pet3”,“pet4”,“pet5”,“pet6”,]
let x = 1
let stop = "no"
while (x <= 6 && stop == “no”){
if((document.getElementById((“p”+x)).checked)==true){
petUser = x
stop = “si”
}
x = x + 1
}
petUser = pets[(petUser - 1)]
alert("escogiste a " + petUser)

Al intentar hacer solo el ejercicio cree otra variable, con el id de button, y lo raro fue que funciono jaja

Decirle al jugador que seleccione una mascota en caso de qué le diera al boton seleccionar sin haber seleccionado nada

Codificando el algoritmo que vimos en la clase pasada para averiguar que mascota ha sido seleccionada por el jugador

Me salio asi😊

yo como en piedra papel o tijera

Habla muy rapido, me gusta mucho el carisma que tiene y el sentido de cariño que tiene al dar la clase, por mi parte estoy tratando de retener todo. Mil gracias.

Para cuando no se haya seleccionado niguna mascota, añadí el ‘else’, asi cuando no se seleccione ninguna mascota y se presione el botón de seleccionar, me salga una alerta de que no seleccione nada. (Min 10:29)

La verdad no me gusta el método de enseñanza de este profesor, porque cuando coloca alguna linea de código siempre a lo ultimo termina o corrigiéndola o añadiendo algo que iba antes, y eso lo único que hace es confundir.

Dentro de mi código en la función de seleccionar mascota dentro del IF no utilice ningún llamado a alguna variable , simplemente utilice el ID del input, ya que en la función iniciar juego ya existe un evento cuando se le da click al botón de seleccionar, creo que ahorra líneas de código y es igual de funcional

if (miura.checked) {
alert(‘SELECCIONASTE A MIURA’)
} else if (fosten.checked) {
alert(‘SELECCIONASTE A FOSTEN’)
} else if (spined.checked) {
alert(‘SELECCIONASTE A SPINED’)
}
else {
alert(“DEBES SELECCIONAR TU MASCOTA”)
}

Mi solución a esto, la cual la hice en la clase pasada fue colocar el siguiente código:

 if(input1.checked) {
        alert("Seleccionaste a Input 1")
    } else if (input2.checked) {
        alert("Seleccionaste a Input 2")
    }
	

Y así para las demás opciones, porque tengo más de tres, y el código final se vería algo así, solo con dos inputs para que no sea tan largo:

 if(input1.checked) {
        alert("Seleccionaste a Input 1")
    } else if (input2.checked) {
        alert("Seleccionaste a Input 2")
     }	else {
        alert("No has seleccionado nada")
    }

Y a menos de que vayamos a usar esas variables más adelante, siento que simplifica un poco el código hacerlo de esa forma 😃

Y definitivamente la ayuda que brinda Visual Studio Code… estamos un paso mas allá de cometer ese tipo de errores.

Algo que hice desde hace varias versiones, fue el mover el Radio Button al inicio del nombre de la mascota… pues visualmente creo que ayuda #UI #UX

Dejo mi solucion.

Yo hice las condis de esta manera

let Personaje_seleccionado
    if(document.getElementById("Lu Chang").checked){
        Personaje_seleccionado="Lu Chang"
    }
    else if(document.getElementById("Ardrid").checked){
        Personaje_seleccionado="Ardrid"
    }
    else if(document.getElementById("Fogos").checked){
        Personaje_seleccionado="Fogos"
    }
    else if(document.getElementById("Shock").checked){
        Personaje_seleccionado="Shock"
    }
    else if(document.getElementById("Godman").checked){
        Personaje_seleccionado="Godman"
    }
    else if(document.getElementById("Oldswan").checked){
        Personaje_seleccionado="Oldswan"
    
    }
    else{
        Personaje_seleccionado='Ningun personaje' 
    }
    alert('SELECCIONASTE A '+ Personaje_seleccionado)

Me tomé la libertad de hacerlo de esta manera y corre muy bien.

<code> 
function seleccionarMascotaJugador(){
    let inputHipodoge = document.getElementById('Hipodoge')
    let inputCapipepo = document.getElementById('Capipepo')
    let inputRatigüeya = document.getElementById('Ratigüeya')

    if (inputHipodoge.checked)
        alert("Seleccionaste a Hipodoge")
    else if (inputCapipepo.checked)
        alert("Seleccionaste a Capipepo")
    else if (inputRatigüeya.checked)
        alert("Seleccionaste a Ratigüeya")
    else {
        alert("Por favor, elige alguno de los personajes para comenzar el juego")
    }

}

![](

Así es como voy hasta ahora. Me siento demasiado orgullosa de esto, hasta creé personajes con MidJourney para colocarlos como los contrincantes. ❤️ Los feedback son muy bienvenidos.

para los que no usaron la etiqueta input sino select no se le agrega .checked sino .selected

function seleccionarMascota(){
  let option1 = document.getElementById('m1')
  let option2 = document.getElementById('m2')

  if (option1.selected){
    alert("hipoge")
  }else if (option2.selected) {
    alert("bless")
  }
}

bueno aqui aprendiendo pasito a pasito

Mi solución:

function petSearcher() {

    let petArray = ["hipodoge", "capipepo", "ratigueya", "langostelvis", "pydos"];

    for (let i = 0; i < petArray.length; i++) {

        if (document.getElementById(petArray[i]).checked) {

            alert("You have successfully selected " + petArray[i] + " as your warrior pet");
            break;

        } else {
            alert("You haven't chosen a mokepon yet!");
            break;
        }
    }
}


function charger() {
    let petConfirmButton = document.getElementById("confirm-button");
    petConfirmButton.addEventListener('click', petSearcher);
}


window.addEventListener('load', charger());```

Así resolví el ejercicio 😃

if (inputHipodoge.checked) {
        alert("Seleccionaste a Hipodoge")
    } else if (inputCapipepo.checked) {
        alert("Seleccionaste a Capipepo")
    } else if (inputRatigueya.checked) {
        alert("Seleccionaste a Ratigueya")
    } else {
        alert("no has seleccionado nada, rey")
} 

¡Qué buen curso! 😃

Muy buena clase

Asi me va quedando

Gracias profe Juan David Castro, muy buena explicacion

Puse los elementos dentro de una lista y los busque con find, para evitar tantos if.

function seleccionarMascotaJugador()
{
	let inputMascotas=[document.getElementById("Hipo"),document.getElementById("Capi"),document.getElementById("Rati"),document.getElementById("Lango"),document.getElementById("Tuca"),document.getElementById("Py")];
	let mascotaSeleccion=inputMascotas.find(elemento=>elemento.checked);
	if (mascotaSeleccion===undefined) 
		alert("Tenés que seleccionar una mascota");
	else
		alert("seleccionaste a "+mascotaSeleccion.id);
}

CAPIPEO.!!
min 4.28.
a mi también me pasó

<if (inputHipodoge.checked) {
        alert("Seleccionaste a Hipodoge!!!")
    } else if (inputCapipepo.checked) {
        alert("Seleccionaste a Capipepo!!!")
    } else if (inputRatigueya.checked) {
        alert("Seleccionaste a Ratigueya!!!")
    } else 
        alert ("No has seleccionado aun =(")> 

Adjunto mi aporte
Es un poco diferente ya que estoy haciendo una variante con autos

function iniciarPrograma()
{
    
    let botonSeleccionarAuto = document.getElementById("botonSeleccionarAuto") //se crea una variable del boton, y se le asigna el id del html
    botonSeleccionarAuto.addEventListener("click", seleccionarAuto) //se agrega un eventLister al boton que cuando se le de click ejecute una function
}

function seleccionarAuto() //function para seleccionar auto
{

    let autoOpcion1 = document.getElementById("autoOpcion1") //se asignan variables a los id del html
    let autoOpcion2 = document.getElementById("autoOpcion2")
    let autoOpcion3 = document.getElementById("autoOpcion3")
    let autoSeleccionado = "" //variable del auto seleccionado segun el checked

    if(autoOpcion1.checked)
    {
        autoSeleccionado = "Toyota"
    }
    else if(autoOpcion2.checked)
    {
        autoSeleccionado = "Audi"
    }
    else if(autoOpcion3.checked)
    {
        autoSeleccionado = "BYD"
    }
    else if(autoOpcion4.checked)
    {
        autoSeleccionado = "BMW"
    }
    else if(autoOpcion5.checked)
    {
        autoSeleccionado = "Nissan"
    }
    else if(autoOpcion6.checked)
    {
        autoSeleccionado = "Volskwagen"
    }

    if(autoSeleccionado != "")
    {
        alert
        (
            "El auto seleccionado es: " + autoSeleccionado + "\n"
        )
    }
    
    else
    {
        alert("Por favor selecciona un auto")
    }

}


window.addEventListener("load", iniciarPrograma) //load html before JS

Yo lo hice de esta manera que me parece más sencilla y se ve bien. ¿Qué opinan?

function seleccionarBestia(){
    if(document.getElementById("guara").checked){
        alert("Has seleccionado al Guara")
    }
    else if(document.getElementById("armadillo").checked){
        alert("Has seleccionado al Armadillo")
    }
    else if(document.getElementById("guasarapo").checked){
        alert("Has seleccionado al Guasarapo")
    }
}

let botonSeleccionarBestia = document.getElementById("seleccionar-besita")
botonSeleccionarBestia.addEventListener("click", seleccionarBestia)

Gracias.

El curso esta muy didáctico a darle con todo y terminar el curso que así uno aprende divirtiéndose, comparto mi avance

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

    if (inputHipodoge.checked){
        alert("Seleccionaste a Hipodoge 🦛💧")
    } else if(inputCapipepo.checked){
        alert("Seleccionaste a Capipepo 🦫🌱")
    } else if(inputRatigueya.checked){
        alert("Seleccionaste a Ratigueya 🐀🔥")
    } else {
        alert("Seleccionaste Perder ☠️")
    }
}

En este punto del curso empecé a sentirme algo confundido o perdido, sin embargo la dinámica y actitud del profe Juan David hace que sea menos frustrante y un poco más sencillo continuar aprendiendo… ¡Felicitaciones profe!

function playerPet(){
let inputhipo = document.getElementById(‘hipodoge’)
let inputcapi = document.getElementById(‘capipepo’)
let inpurati = document.getElementById(‘ratigueya’)

if (inputhipo.checked){
    alert('You selected Hipodge')
} else if (inputcapi.checked){
    alert('You selected Capipepo')
} else if (inpurati.checked){
    alert('You selected Ratigueya')
} else {
    alert('Select your pet')
}

}

declaramos las variables: let inputHipodoge = document.getELementById(“hipodoge”)

para directamante llamar a la variable y poner solo en if (inputHipodoge.checked) {
alert(“Seleccionaste a hipodoge”)
}

el .checked se usa para chequear si es true o false (verdadero o falso)

Perfecto! , aprecio la energía con la que imparte las clases logra animar mucho.

El mio quedo asi, no se si me podrian sugerirme alguna otra idea para validar cuando no escoge a ningunos

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

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

    if (inputHipodoge.checked) {
        alert('Seleccionaste Hipodoge')
    } else if (inputCapipepo.checked) {
        alert('Seleccioneste a Capipepo')
    } else if (inputRatigueya.checked) {
        alert('Seleccioneste a Ratigueya')
    } else {
        alert('Selecciona una mascota 😺')
    }
}


window.addEventListener('load', iniciarJuego)

A mí me gusta que cuando los if, else if y else tienen una instrucción simple, colocarla de forma directa como mi ejemplo de abajo, siento que queda más limpio y ordenado.

if(hipodoge.checked) alert("Seleccionaste a Hipodoge");
else if(capipepo.checked) alert("Seleccionaste a Capipepo");
else if(ratigueya.checked) alert("Seleccionaste a Ratigueya");
else alert("Selecciona una mascota");

Al ver la clase anterior fui modificando el código mientras entendía los conceptos que nos pasaba el profe en la clase pasada, el código me quedo un tanto diferente al del profe en esta clase, ya que no tengo las variables input que se crearon esta clase, aun asi el mokepon me funciona perfectamente.

No se si esto sera una mala practica o es una forma diferente de hacerlo, pero les comparto mi codigo para que lo vean 😄

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

}

function seleccionarMascotaJugador(){
    if (hipodoge.checked){
        alert("¡Haz seleccionado a Hipodoge!")
    } else if (capipepo.checked){
        alert("¡Haz seleccionado a Capipepo!")
    } else if (ratigueya.checked){
        alert("¡Haz seleccionado a Ratigueya!")
    } else{
        alert("No has seleccionado ninguna mascota, para continuar seleciona alguna")
    }
}

window.addEventListener("load", iniciarJuego)

📌 el addEventListener nos ayuda a detectar acciones que ocurren en nuestro HTML

Esta fue mi solución, como los inputs en el código HTML del curso ya tienen un atributo id, con ese mismo identificador realice el llamado por JS mediante la condicional (garados.checked)
bueno en tu caso debe ser un nombre diferente
// function SeleccionarMascotaJugador(){
// if (garados.checked){

// alert(“seleccionaste garados”)
// }
// else if (bulbasor.checked){

// alert(“seleccionaste bulbasor”)
// }
// else if(charmander.checked){

// alert(“seleccionaste charmander”)
// }

// }

lo hice así

// aqui se dispara la funcion cuando le picamod al boton "seleccionar"
function seleccionarMascotaJugador() {
  if (document.getElementById("hipodoge").checked) {
    alert("SELECCIONASTE A HIPODOGE");
  }else if (document.getElementById("capipepo").checked) {
    alert("SELECCIONASTE A capipepo").checked;
  } else if (document.getElementById("ratigueya").checked) {
    alert("SELECCIONASTE A Ratigueya");
  } else {
    alert("Elige una mascota")
  }
}
let botonMascotaJugador = document.getElementById("btn-mascota");
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador);

Acá una versión en ingles sin utilizar bucles, requiere algunos conceptos intermedios de JS pero quise darle un toque personal.

function selectPlayerPet() {
    // get all the pets
    const pets = document.getElementsByName('pet');
    //turn pets into an array
    const petlist = Array.prototype.slice.call(pets);
    //find selected pet
    const pet = petlist.find((element) => element.checked == true)?.id;
    const petShout = typeof pet !== 'undefined' ? pet.toUpperCase() : '';
    const message =
        petShout == ''
            ? 'Please select a pet'
            : 'YOU HAVE PICKED YOUR PET, ' + petShout + '!!!';
    alert(message);
}

pausando la clase, realicé la siguiente formula que aprendí con Freddy.

luego de los if’s sobre cada input . debajo puse la siguiente formula.
else {
alert(‘No elegiste nadda’)
}

PD: estos profesores enseñan muy claramente, vamos a por más.

Yo lo hice así! 😄

<function seleccionarMascotaJugador(){ 
    let inputHipodoge = document.getElementById("Hipodoge");
    let inputCapipepo = document.getElementById("Capipepo");
    let inputRatigueya = document.getElementById("Ratigueya");

    if (inputHipodoge.checked){
        alert("Seleccionaste a Hipodoge ")
    } else if (inputCapipepo.checked){
        alert("Seleccionaste a Capipepo ")
    } 
    // En este ultimo else lo == a true porque el evento .checked
    // lo que hace es que si el evento click se dispara me dice true
    // de lo contrario sigue en false (boleanos) pero, si se dispara 
    // el evento en teoria es true por eso no es necesario ponerlo.
    else if (inputRatigueya.checked == true){
        alert("Seleccionaste a Ratigueya ")
    } else (document.getElementById.checked == false);{
        alert("¡Ops! Olvidaste seleccionar alguna de las mascotas. 😅");
    }
}>