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 💚

Erik López

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

Michelle Duque De La Rosa

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

Yamid Ortiz M

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

ifdavid

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

Samuel Delgado Montoya

Quiero comentar algo que Juan David no mencionó.
Para solucionar el problema de que el script cargue antes del documento, lo que yo hice fue solamente agregar a la etiqueta <script> el atributo defer, me gustaría saber si alguien la conoce y si es correcto utilizarla en éste caso

<head>
    <script defer src="./js/mokepon.js"></script>
</head>

David Zapata

Logre hacerlo con la misma función de Juan, solo que mi función tiene de mas que si no selecciona una mascota le avisa

Ariel Plaza

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)

Jorge Uribe

Yo lo hice así

Edwin Jesús

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/>

Gabriel Obando

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

Luis Fernando Mafla Arboleda

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

Maria Fernanda Álvarez

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. 💛

Ariel Andrés Tapia

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.

oliver fernando palacios ortega

me encanta programar

Dámaris Dall’Orto

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

Luis Carlos Carrillo

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.

Harry's Barahona

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

Marissa Vargas

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.

Marian Mancilla

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.

Diego Alejandro Moreno Pedroza

Sería súper agregar un

else{
}

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

andres gustavo arboleda bermudez

la verdad no entiendo nada

Johnny Gutiérrez Morales

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

Andriw Jose Rollo Castro

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! 💚

JOHAN OROZCO

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

erick soto huamanhorcco

ESTA FUE MI SOLUCIÓN

Francisco Garcia Zuluaga

Toma tu True! 😂

Asura Tito

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

Claudia Fontalva

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

Isaac Bryan Ascanoa Roncall

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

Isaac Bryan Ascanoa Roncall

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.

sergio andres navarro melendez

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

Jhon Alessandro Leon Valero

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

Leopoldo Martinez

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

Yolanda Fuentes Reynoso

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”);
}
}

Daniel Andrés Vélez Vargas

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.

Diego Geovanny Bracero

Mi solución

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

Alejandro Barrera

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

}

Shay Fernando Guzman Vara

🐭 ¡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 💚:

Kimberlyn Serrano

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

Marcos Monteverde

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

Stalin Carrasco Dávila

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

Nestor Colmenarez Torres

7:33 #TomaTutru

Marco Arroyo

hace 9 meses

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)

)

Percy Pablo Barriga Ponce

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

Yarokxy Arjadis Lázaro Mejia

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

Luis Alejandro Rojas Figueira

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>

Raymondi Alejandro Ramos Vásquez

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

Jose Gustavo Santos Corrales

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

Gabriel Ariza

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

Franco Cruz

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

Angel Antonio Barrios Pacheco

¿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:
.

<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.
.
<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.
.
<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💚

Alejandro Casllas

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

Osvaldo Paz

hace 7 meses

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

Kevin Andres Rojas Nañez

hace 7 meses

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)

Carlos Arbelaez

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

Camilo Jose Cuadrado

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

John Pinto

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

José María Camacho García

Al final salió esto, tenía la idea de hacerlo un if, pero como el vincular que para hacer la comprobación. Batalle mucho porque al colocar él . después del nombre de ID de los input, no me daba la opción de checked. Me sugería un checkVisibility lo que terminó con causarme muchos problemas. ¿Saben por qué no salía checked como una de las posibles opciones en VSC?

function seleccionBichimonPlayer(){
    //Manda un mensaje sobre que se elijio un Bichimon
    if(document.getElementById("paltano").checked){//Comprueba si la opción está selecionada
        alert("Has elegido a: Paltano ¡Hora de explorar!")
    }
    else if(document.getElementById("shelas").checked){//Comprueba si la opción está selecionada
        alert("Has elegido a: Shelas ¡Hora de explorar!")
    }
    else if(document.getElementById("flammello").checked){//Comprueba si la opción está selecionada
        alert("Has elegido a: Flammello ¡Hora de explorar!")   
    }
    else{
        alert("No has elegido a ningún Bichimon")
    }
}

Ericka Andrea Esparza Quintana

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; 
}

}

Yorlan Marroquin

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

Juan Silva

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

Ramiro Bamba

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

Michael Heredia Blanco

hace 9 meses

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)

Clair

hace 10 meses

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

Gorka Gallardo Castany

hace 10 meses

Así es como lo hice yo :’))

ROSSANA IVON CALDERA SERRANO

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

Jesús Torres

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

Leo Ren

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”.

Jonatan Martin

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

}

Andy Gregorio

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

Carlos Rosano

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

Alfonso Dávila

excelente clase!!!

Marwan El Ouarti Mellado

(·_·)

Yamal Marquez

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

Jesús Martínez

Rubén Althair De Los Santos Suárez Aliaga

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

Carlos Alberto Herrerea Perez

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

Milton Andres Jaramillo Suarez

El profe Juan es el mejor

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

Javier Rojas

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 😄.

yeraldin carvajal granda

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

Juan Camilo Vela Martinez

Así lograría ser el codigo para hipodoge

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

Jose David Calonge Cuervo

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 💪🏻

Screen Shot 2022-10-12 at 11.17.53 AM.png

CLAUDIA PATRICIA VELASQUEZ MESA

Juan David, gracias me encanta tu estilo

user_deleted_3619831

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 .

Franklin Pache

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

Mario Alexander Vargas Celis

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

Marwan El Ouarti Mellado

4:22 se le salieron los demonios con el boom

Diana Clabel

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

Sara Belén Rosero Tajan

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.

Rolando Osorio

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)

Aldo Andrés Beltrán Segovia

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

stefanyk Pirela

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

Francisco CRUZ

Excelentes las explicaciones.
Muchas gracias…

Mauren García

Esta lógica usé!

function selectPetPlayer() {
    if (document.getElementById('burnling').checked) {
        alert('Burnling yo te elijo!')
        
    } else if (document.getElementById('armasaur').checked) {
        alert('Armasaur yo te elijo!')

    } else if (document.getElementById('rocky').checked) {
        alert('Rocky yo te elijo!')
        
    } else {alert('Selecciona a tu mascota!')}
}

Pamela Cinthya Torres Gutiérrez

Esta es mi propuesta del ejercicio, no se si existan otras formas más avanzadas.
.

function seleccionarMascotaJugador() {
    if (document.getElementById('hipodoge').checked == true) {
        alert('Seleccionaste a Hipodoge')
    } else if (document.getElementById('capipepo').checked == true) {
        alert('Seleccionaste a Capipepo')
    } else alert('Seleccionaste a Ratigueya')
}

Pamela Cinthya Torres Gutiérrez

Roberto Carlos Cardenas Sosa

La forma en como hice que funcionara

function seleccionarMascotaJugador() {
    if(document.getElementById("hipodoge").checked == true){
        alert("Escogiste a Hipodoge")
    }else if(document.getElementById("capipepo").checked == true){
        alert("Escogiste a Capipepdo")
    }else{
        alert("Escogiste a Ratigueya")
    }
}

Sergio Figueredo

es poco pero iniciando voy bien espero, ahora integrar los gif y/o ipg de las mascotas
function iniciarJuego(){
let botonMascotaJugador = document.getElementById(‘boton-mascota’)
botonMascotaJugador.addEventListener(‘click’, selecionarMascotaJugador)
}

function selecionarMascotaJugador(){

    if(document.getElementById('cangrejo').checked) {
        alert('Has seleccionado el cangrejo')
    } 
    else if(document.getElementById('serpiente').checked) {
        alert('Has seleccionado a la serpiente')
    } 
    else if(document.getElementById('dragon').checked) {
        alert('Has seleccionado  el dragon')
    } 
    else if(document.getElementById('aguila').checked) {
        alert('Has seleccionado el agula')
    } 
    else if(document.getElementById('tortuga').checked) {
        alert('Has seleccionado a la tortuga')
    } 
    else if(document.getElementById('sapo').checked) {
        alert('Has seleccionado al sapo')
    } 
    else if(document.getElementById('escorpion').checked) {
        alert('Has seleccionado el escorpion')
    } 
    else if(document.getElementById('alcon').checked) {
        alert('Has seleccionado el alcon')
    } 
    else if(document.getElementById('rata').checked) {
        alert('Has seleccionado a la rata')
    } 
}

Brayan Estiben Rodallega Saavedra