0

ante todo soy nuevo en javascript y en este foro. Agradezco si me pueden colaborar en lo siguiente: tengo una web con 9 botones y 9 imagenes. La idea es al presionar un botón, se reproduce un sonido (ya lo tengo funcionando). Ahoro lo que necesito es que al pesionar sobre una imagen, debe corresponder con la del sonido. Ejemplo si se presiona un botón y se escucha el sonido del pollito, el usuario si seleciona la imagen del pollito, le mostrará un mensaje, caso seleccione otra imagen, le debe mostrar mensaje de error. Para mayor claridad, esta es la imagen de la web: imagen de ejemplo
Muchas gracias por las ideas que me puedan aportar.

1 respuesta 1

1

Mira, lo que a mi se me ocurre es algo así.

Primero agregar un atributo data a los botones:

data-sonido="pollito"

Cuando presionan un botón, guardar el atributo data en una variable, algo así:

$('.botones').click(function(){
    var btn_sonido = $(this).data('sonido');
})

Después le pondría a cada imagen otro atributo data:

data-imagen="pollito"

Y crear el evento para cada vez que den click en una imagen obtener el valor del atributo data:

$('.imagenes').click(function(){
    var img_animalito = $(this).data(imagen);
});

Y una ves hecho esto comparar las variables

if(img_animalito == btn_sonido){
    alert("Bien hecho!");
}else{
    alert("Te has equivocado de animalito, vuelve a intentarlo.");
}

Es lo que a mi se me ocurre, espero que te sirva.

5
  • Perdón, di por hecho que estas utilizando jQuery, pero aunque no lo estés utilizando, la idea es mas o menos la misma utilizando javascript únicamente
    – Agares
    el 12 oct. 2018 a las 20:15
  • Muchas gracias por tu respuesta. Algo así como mencionas es lo que estoy buscando. Como mencioné, no soy experto en Javascript ni jQuery pero leyendo y pidiendo ayuda creo podré lograrlo. Si no puedo, te preguntaré de nuevo, luego vuelvo para cerrar la pregunta. Gracias de nuevo.
    – Jerry
    el 15 oct. 2018 a las 17:09
  • Hola Agares, ya intenté hacer todo lo sugerido y ya casi está listo el código pero me falta la parte en queme dices que hay que comparar las variables, es decir esta parte: if(img_animalito == btn_sonido){ alert("Bien hecho!"); }else{ alert("Te has equivocado de animalito, vuelve a intentarlo."); } creo es porque eso debe ir todo en un solo script pero no estoy seguro e hice la prueba pero no me funciona. Aquí puedes ver la web: <proveeplast.000webhostapp.com> Podrías por favor ayudarme con esa partecita que me falta? Muchas gracias!
    – Jerry
    el 17 oct. 2018 a las 2:28
  • la variable img_animalito la debes declarar fuera del evento click, lo mismo sucede con la variable dataId, esto para que sean accesibles fuera de las funciones, algo así: var dataId; $('.botones').on('click',function () { dataId = $(this).attr("data-id"); alert($(this).attr("data-id")); }); Te serviría revisar sobre el scope en javascript. Espero que te haya servido aún después del tiempo, es que ando lleno de trabajo. Saludos
    – Agares
    el 19 oct. 2018 a las 4:45
  • Muchas gracias por tu ayuda, me ha servido mucho.
    – Jerry
    el 26 oct. 2018 a las 3:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.