1

Me gustaría hacer una galería simple, con tres imágenes, y que el usuario al hacer click en un botón aparezca una de las tres imágenes al azar. Podríais decirme que es lo que tengo mal en mi código, y el motivo por el cual no funciona?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <title>Page Title</title>
        <script>
            $(document).ready(function(){
                var galeria="";


                function inicio() {
                galeria = document.querySelectorAll("img")
                ocultar();
                galeria[0].style.display = "block";

                }

                function ocultar(){
                    $(galeria).each(function(element){
                    element.style.display="none";
                    });
                }

                function imagenRandom(){
                    var aleatorio=Math.round(Math.random()*4);


                    if($(galeria[0])==$(galeria[aleatorio])){
                        $(galeria[aleatorio]).style.display = "block"

                    }else{
                        $(galeria[aleatorio]).style.display = "none"
                    }
                   if($(galeria[1])==$(galeria[aleatorio])){
                        $(galeria[aleatorio]).style.display = "block"

                    }else{
                        $(galeria[aleatorio]).style.display = "none"
                    }
                    if($(galeria[2])==$(galeria[aleatorio])){
                        $(galeria[aleatorio]).style.display = "block"

                    }else{
                        $(galeria[aleatorio]).style.display = "none"
                    }    
               } 
            });
        </script>
    </head>
    <body onload="inicio()">
        <center>
            <div>
                <h1>Galeria de imágenes</h1>
            </div>

                <img src="img/dembele.jpg" alt="">
                <img src="img/iniesta.jpg" alt="">
                <img src="img/messi.jpeg" alt="">

            <input type="button" onclick="imagenRandom()" id="verImagen" value="Ver aleatorio" >
        </center>
    </body>

1 respuesta 1

1

tenias varios errores en tu código, lo arregle para que funcione como quieres, te lo dejo funcionando, saludos.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <title>Page Title</title>
        <script>
            var galeria="";
                            function inicio() {
            	                galeria = document.querySelectorAll("img");
            	                galeria[0].style.display = "block";
            	                galeria[1].style.display = "none";
            	                galeria[2].style.display = "none";

                            }

                            function imagenRandom(){
                            	galeria = document.querySelectorAll("img");
                                var aleatorio=Math.floor(Math.random()*3);
                                // alert(aleatorio);
                                if(aleatorio==0){
                                    galeria[0].style.display = "block";
                                    // alert(aleatorio);
                                }else{
                                    galeria[0].style = "display: none;";
                                }
                               if(aleatorio==1){
                                    galeria[1].style.display = "block";

                                }else{
                                    galeria[1].style = "display: none;";
                                }
                                if(aleatorio==2){
                                    galeria[2].style.display = "block";

                                }else{
                                    galeria[2].style = "display: none;";
                                }    
                           } 

                            
        </script>
    </head>
    <body onload="inicio()">
        <center>
            <div>
                <h1>Galeria de imágenes</h1>
            </div>

                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png" width=100 height=100 alt="">
                <img src="https://www.destinoytarot.com/wp-content/uploads/2011/02/Numero2.jpg" width=100 height=100  alt="">
                <img src="https://i.pinimg.com/originals/63/54/56/6354560a3604f0eba5976d6c5d885e9a.png" width=100 height=100  alt="">

            <input type="button" onclick="imagenRandom()" id="verImagen" value="Ver aleatorio" >
        </center>
    </body>

2
  • Dentro de la función imagenRandom, si se quiere comprobar si la posición donde se encuentra galería es la misma que aleatorio, mediante jquery, como se debería de poner? ¿Así: if($(galeria[0])==aleatorio){ galeria[0].style.display = "block"; } else{ galeria[0].style.display = "none"; } Commented el 15 abr. 2018 a las 16:38
  • Estas comparando un objeto con un numero, solo necesitas comparar el indice con aleatorio, como: if(0==aleatorio){ //codigo..) Commented el 15 abr. 2018 a las 18:00

Tu Respuesta

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

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