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 💚
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
¿Cómo aprender programación?
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Visual Studio Code
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién ganó el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿Y ahora qué curso tomar?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 61
Preguntas 19
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")
}
}
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')
}
}
Al inicio del html podemos utilizar defer, esto realiza que despues de cargado se ejecute el JS:
<script src="./js/main.js" defer></script>
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>
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);
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í
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.
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/>
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.
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
Sería súper agregar un
else{
}
Al final por si el usuario no selecciona ninguna de las opciones
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 💚:
No se si estará bien, pero yo lo hice de esta forma.!
al principio no me funciono por que puse .ariachecked en lugar de checked normal
function eleccion(){
let guerreros
if(document.getElementById(“ESPADACHIN-DE-FUEGO”).checked==true) {guerreros=“ESPADACHIN DE FUEGO”
}
else if(document.getElementById(“ARQUERO-DE-AGUA”.checked)true){guerreros=alert(“ARQUERO DE AGUA”)
}
else if(document.getElementById(“LANCERO-DE-TIERRA”).checkedtrue){guerreros=alert(“LANCERO-DE-TIERRA”)}
alert("HAZ SELECCIONADO "+ guerreros)
}
<function seleccionarMascotaJugador(){
if (document.getElementById("Hipodoge").checked){
alert("Seleccionaste a Hipodoge ")
} else if (document.getElementById("Capipepo").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 ((document.getElementById("Ratigueya").checked) == true){
alert("Seleccionaste a Ratigueya ")
}
}>
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)
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)>
Lo logre!! 😁😁
<function seleccionarMascotaJugador(){
let hipodoge = document.getElementById('hipodoge').checked
let capipepo = document.getElementById('capipepo').checked
let ratigueya = document.getElementById('ratigueya').checked
if (hipodoge == true){
alert("SELECCIONASTE A HIPODOGE")
}else if (capipepo == true){
alert("SELECCIONASTE A CAPIPEPO")
}else if (ratigueya == true){
alert("SELECCIONASTE A RAYIGUEYA")
}
}
function iniciarJuego(){
let botonMascotaJugador = document.getElementById('boton_mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}
window.addEventListener('load', iniciarJuego)>
Se ve más bonito el console en Brave 😄
Esta fue mi función:
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")
}
}
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")
}
let seleccion=document.getElementById(“hipodoge”).checked
if (seleccion==true) {
alert ("Elegiste a " + "Hipodoge")
}
else if (seleccion==false) {
let seleccion=document.getElementById("capipepo").checked
if (seleccion==true){
alert ("Elegiste a " + "capipepo")
}
else if (seleccion==false) {
let seleccion=document.getElementById("ratigueya").checked
if (seleccion==true){
alert ("Elegiste a " + "ratigueya")
}
else if (seleccion==false) {
let seleccion=document.getElementById("langostelvis").checked
if (seleccion==true){
alert ("Elegiste a " + "langostelvis")
}
else if (seleccion==false) {
let seleccion=document.getElementById("tucapalma").checked
if (seleccion==true){
alert ("Elegiste a " + "Tucapalma")
}
else if (seleccion==false) {
let seleccion=document.getElementById("pydos").checked
if (seleccion==true){
alert ("Elegiste a " + "Pydos")
}
}
}
}
}
}
yo lo hice de esta forma y me funciono… se que debe haber una forma mas simple y con menos codigo… pero bueno…
function seleccionarMascotaJugador(){
let eleccion = ""
if(document.getElementById("hipodoge").checked){
eleccion = "Hipodoge"
} else if(document.getElementById("capipego").checked){
eleccion = "Capipego"
} else if(document.getElementById("ratigueya").checked){
eleccion = "Ratigueya"
} else {
eleccion= "ninguna mascota"
}
alert('Has seleccionado a ' + eleccion)
}
Asi hice yo la función.💚
function MascotaSeleccionada(){
//Colocar los radios en variables y luego comprobar si están check con un operador logico de comparación.
let hipodoge = document.getElementById("hipodoge");
let capipepo = document.getElementById("capipepo");
let ratigueya = document.getElementById("ratigueya");
if (hipodoge.checked == true) {
alert("seleccionaste al hipodoge");
}
else if (capipepo.checked == true) {
alert("Seleccionaste capipepo");
}
else if (ratigueya.checked == true) {
alert("Seleccionaste a la ratigueya")
}
else {
alert("Selecciona uno de los tres puchamones");
}
}
Recuerdo que cuando aprendí el manejo de eventos en Java y JavaScript me sentí más poderoso que nunca y presumía lo bueno que era y lo enseñaba con emoción, que tiempos aquellos xD
if(document.getElementById("hipodoge").checked){
alert("seleccionaste a Hipodoge")
}else if (document.getElementById("capipego").checked){
alert("seleccionaste a capipego")
}else if (document.getElementById("ratigueya").checked){
alert("seleccionaste a ratigueya")
}else
De alguna manera me sirvio xd aun no se como, aqui dejo el codigo!
function iniciarGame() {
let btnPetPlayer = document.getElementById("btn-pet")
btnPetPlayer.addEventListener("click", seleccionarPetPlayer)
}
function eleccionPet(eleccion) {
let resultado = ""
if (eleccion == document.getElementById("hipodoge").checked == false) {
resultado = "Hipodoge"
} else if (eleccion == document.getElementById("capipepo").checked == false) {
resultado = "Capipepo"
} else if (eleccion == document.getElementById("ratigueya").checked == false) {
resultado = "Ratigueya"
} else {
resultado = "nada"
}
return resultado
}
let player = ""
function seleccionarPetPlayer() {
alert("Has seleccionado a " + eleccionPet(player))
}
window.addEventListener("load", iniciarGame)
No les pasa que: Toma tu true jejejejeej muy excelente manera de enseñar además de muy dinamica
A mi me funcionó así
if (document.getElementById('M1').checked) {
alert("Elegiste Agua")
} else if (document.getElementById('M2').checked) {
alert("Elegiste Tierra")
} else if (document.getElementById('M3').checked) {
alert("Elegiste Fuego")
}
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")
}
}
Desarrolle el codigo de la funcion seleccionarMascotaJugador() utilizando el operador ternario
function seleccionarMascotaJugador(){
(document.querySelector("#hipodoge").checked === true)
?alert("Seleccionaste a Hipodoge")
:(document.querySelector("#capipepo").checked === true)
?alert("Seleccionaste a Capipepo")
:(document.querySelector("#ratigueya").checked === true)
?alert("Seleccionaste a Ratigueya")
:(document.querySelector("#langostelvis").checked === true)
?alert("Seleccionaste a Langostelvis")
:(document.querySelector("#tucapalma").checked === true)
?alert("Seleccionaste a Tucapalma")
:(document.querySelector("#pydos").checked === true)
?alert("Seleccionaste a Pydos")
:alert("No seleccionaste ninguna mascota, \n\n!SELECCIÓNALA AHORA!");
}
No tenia idea del “checked”!! Muy buena.
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! 💚
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.
function seleccionarMascotaJugador(){
if(document.getElementById("hipodoge").checked == true){
alert("ha elegido Hipodoge")
}else if(document.getElementById("capipepo").checked == true){
alert("Ha elegido a Capipepo")
}else if(document.getElementById("ratigueya").checked == true){
alert("Ha elegido a Ratigueya")
}else{
alert("Aun no elige a una mascota, elija una")
}
}
Mi solución.
function startGame() {
let buttonPetPlayer = document.getElementById('button-pet');
buttonPetPlayer.addEventListener('click', choosePetPlayer);
}
function choosePetPlayer() {
if (document.getElementById('hipodoge').checked === true) {
console.log('Hipodoge has been chose')
}
else if (document.getElementById('capipepo').checked === true) {
console.log('Capipepo has been chose')
}
else if (document.getElementById('ratigueya').checked === true) {
console.log('Ratigueya has been chose')
}
else if (document.getElementById('langostelvis').checked === true) {
console.log('Langostelvis has been chose')
}
else if (document.getElementById('tucapalma').checked === true) {
console.log('Tucapalma has been chose')
}
else if (document.getElementById('pydos').checked === true) {
console.log('Pydos has been chose')
}
else {
console.log('Please choose a pet')
}
}
window.addEventListener('load', startGame)
No sé ustedes, pero estuvo muy épico cuando le dijo a la consola: “Toma tu true” 😂
Logré hacerlo con un recorrido:
function seleccionarMascotaJugador() {
for (i=0; i<listaMascotas.length; i++){
console.log(listaMascotas[i]);
if (document.getElementById(listaMascotas[i]).checked){
mascotaJugador=listaMascotas[i];
break;
}
}
alert("seleccionaste a " + mascotaJugador);
}
let listaMascotas=["hipodoge", "capipepo", "ratigueya", "langostelvis", "tucapalma", "pydos"]
Les voy a compartir mi avance por si se atascan durante la realización del ejercicio:
function iniciarJuego(){
let botonMascotaJugador = document.getElementById('boton_mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}
function seleccionarMascotaJugador(){
if (document.getElementById("squirtle").checked == true){
alert('Has seleccionado a Squirtle')
}else if(document.getElementById('bulbasur').checked == true){
alert("Has seleccionado a Bulbasur")
}else if(document.getElementById('charmander').checked == true){
alert("Has seleccionado a Charmander")
}else if(document.getElementById('totodile').checked == true){
alert("Has seleccionado a Totodile")
}else if(document.getElementById('chikorita').checked == true){
alert("Has seleccionado a Chikorita")
}else if(document.getElementById('cindaquil').checked == true){
alert("Has seleccionado a Cindaquil")
}
}
window.addEventListener('load', iniciarJuego)
Yo lo resolví de la siguiente manera:
let mascota = document.getElementsByName("mascota");
mascota.forEach((pet)=>{
if(pet.checked == true){
alert(pet.id)
}
})
“si no se cumple, vamos al segundo condicional” ¿por qué siento que esto se aplica a mi vida?🤣🤣🤣
Así hice yo el código
function iniciarJuego(){
let botonMascotaJugador= document.getElementById('boton-seleccionar');
botonMascotaJugador.addEventListener('click', selecionarMascotaJugador)
}
function selecionarMascotaJugador(){
let hipodoge = document.getElementById('hipodoge')
let capipepo = document.getElementById('capipepo')
let ratigueya = document.getElementById('ratigueya')
if(hipodoge.checked){
alert('SELECCIONASTE AL HIPODOGE')
}
else if(capipepo.checked){
alert('SELECCIONASTE AL CAPIPEPO')
}
else if(ratigueya.checked){
alert('SELECCIONASTE A LA RATIGUEYA')
}
}
window.addEventListener('load', iniciarJuego )
Este fue el código que me funcionó ¿Es válido?
<function seleccionarMascotaJugador() {
let hipodogue = document.getElementById("hipodoge").checked;
let capipepo = document.getElementById("capipepo").checked;
let ratigueya = document.getElementById("ratigueya").checked;
if (hipodogue == true) {
alert("Seleccionaste Hipodogue");
}
else if (capipepo = true){
alert("Seleccionaste Capipepo")
}
else if (ratigueya = true){
alert("Selecionaste Rti")
}
}>
Mi solución, aunque me adelanté un poco en algún concepto
function seleccionarMascotaJugador() {
let mascotas = document.getElementsByName("mascotas");
for (let n=0; n < mascotas.length; n++) {
if (mascotas[n].checked) {
alert("Has seleccionado " + mascotas[n].id);
}
}
}
Pregunta , segui tal cual las instrucciones, pero al chekear en la consola del sitio web la funcion document.getElementById(‘Hipodoge’) , en vez de aparecerme True , me sale Undefined… por que sera?
que genial apenas tenia idea de como usar JS!!
Ya sé cual fue mi error (uno de mis errores 🤦♀️). Estaba haciendo todo para los inputs directamente, sin considerar el boton que ya te lleva a js, para ahi hacer las condicionales utilizando checked.
Con este codigo me sale un alert para cada mokepon pero cuando se selecciona el input, pero no cuando se da click al boton de seleccionar. (Minuto 8:25)
Esta es mi solucion.
let clickeado = false
function iniciarJuego (){
let botonMascotaJugador = document.getElementById('boton-mascota')
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
let botonBaloo = document.getElementById("Baloo")
let botonMimba = document.getElementById("Mimba")
let botonTrapito = document.getElementById("Trapito")
botonBaloo.addEventListener("click", mascotaElegida)
botonMimba.addEventListener("click", mascotaElegida)
botonTrapito.addEventListener("click", mascotaElegida)
}
function mascotaElegida (){
clickeado = true
}
function seleccionarMascotaJugador() {
if(clickeado == true){
alert("SELECCIONASTE TU MASCOTA")
} else{
alert("NO ELEGISTE TU MASCOTA")
}
}
window.addEventListener("load", iniciarJuego)
Creo que algo me salio mal
El profesor da demasiadas vueltas en una sola idea. Es muy cansado aprender así.
Hola, yo resolví el problema de esta manera. No sé si es la mejor forma pero esa se me ocurrió.
Me gustaría saber su opinión. 😄
function seleccionarMascotaJugador() {
var hipodoge = document.getElementById('hipodoge').checked;
var capipepo = document.getElementById('capipepo').checked;
var ratigueya = document.getElementById('ratigueya').checked;
if (hipodoge == true) {
alert('Seleccionaste a: Hipodoge');
} else if (capipepo == true) {
alert('Seleccionaste a: Capipepo');
} else if (ratigueya == true) {
alert('Seleccionaste a: Ratigueya');
} else {
alert('Selecciona una mascota');
}
}
function selectPlayersMascot(e) {
/** @type {HTMLInputElement} mascot */
let mascot = document.querySelector("input[name=mascota]:checked");
if (mascot === null) {
alert("No a seleccionado ningua mascota");
return;
}
/** @type {HTMLLabelElement} nameMascot */
let nameMascot = document.querySelector(`[for=${mascot.id}]`);
alert("Has seleccionado a " + nameMascot.textContent);
}
function startGame() {
/** @type {HTMLButtonElement} buttonMascotPlayer */
let buttonMascotPlayer = document.querySelector("#button-mascot");
buttonMascotPlayer.addEventListener("click", selectPlayersMascot);
}
window.addEventListener("load", startGame);
A mi me funcionó esto 😁, aunque estube intentandolo varios dias y me equivocaba al escribir hipodoge
function iniciarJuego (){
let botonMascotaJugador = document.getElementById('boton-mascotas')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
}
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 a Hipodoge")
} else if (capipepo == true){
alert("Elegiste a Capipepo")
} else if (ratigueya == true){
alert("Elegiste a Ratigueya")
}
}
window.addEventListener('load',iniciarJuego)
😑
Esta fue la solucion que plantee
<code>
function iniciarJuego(){
let botonMascotaJugador = document.getElementById("boton-mascota")
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
}
function seleccionarMascotaJugador(){
let botonHipodoge = document.getElementById("Hipodoge").checked
let botonCapipepo = document.getElementById("Capipepo").checked
let botonRatigueya = document.getElementById("Ratigueya").checked
let botonLangostelvis = document.getElementById("Langostelvis").checked
let botonTucapalma = document.getElementById("Tucapalma").checked
let botonPydos = document.getElementById("Pydos").checked
if (botonHipodoge == true){
alert("seleccionaste hipodoge")
} else if (botonCapipepo == true){
alert("seleccionaste Capipepo")
} else if (botonRatigueya == true){
alert("seleccionaste Ratigueya")
} else if (botonLangostelvis == true){
alert("seleccionaste Langostelvis")
} else if (botonTucapalma == true){
alert("seleccionaste Tucapalma")
} else if (botonPydos == true){
alert("seleccionaste Pydos")
} else {
alert("Selecciona una opción")
}
}
window.addEventListener("load", iniciarJuego)
El audio de la clase está muy bajo de origen.
No tienen que ajustar sus bocinas/audifonos.
copie la variable resultado de piedra papel o tijera :v
function seleccionarMascotaJugador() {
let resultado = "";
if (document.getElementById("hipodoge").checked) {
resultado = "Hipodoge";
} else if (document.getElementById("capipepo").checked) {
resultado = "Capipepo";
} else if (document.getElementById("ratigueya").checked) {
resultado = "Ratigueya";
}else {alert("No has seleccionado mascota");
}
alert("Has seleccionado a" +" "+ resultado)
}
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.