1

tengo la siguiente duda para cambiar una imagen con JS, tengo el siguiente código.

<html>
<head></head>
<script >
    var imagen_random = new Array();
    imagen_random[0] = "images/1.png";
    imagen_random[1] = "images/2.png";
    imagen_random[2] = "images/3.png";
    imagen_random[3] = "images/4.png";
    imagen_random[4] = "images/5.png";
    imagen_random[5] = "images/6.png";

    function cargar_imagen_random(){
       var azar = Math.floor(Math.random() * imagen_random.length);
       document.images["random"].src = imagen_random[azar];
    }
</script>
<body onload="cargar_imagen_random()" >
    <!-- Primer div -->
    <div><img src="images/inicio.png" height="150px" /></div>

    <!-- Segundo div -->
    <div><img src="images/inicio.png" name="random" height="150px" /></div>

    <!-- Tercer div -->
    <div><img src="images/inicio.png" name="random" height="150px" /></div>
</body>
</html>

Todos los div tienen una imagen con el que inicia, hasta ahí todo bien, al agregar el atributo "name=random" en los dos últimos div y al refrescar la pagina (F5) solo me cambia en el segundo div y el tercer div permanece igual sin ningún cambio de imagen.

luego agregué la siguiente linea en el scrript

document.images["random2"].src = objetos[azar];
Y en el tercer div cambie el nombre a name="random2"

y obtuve como resultado que sí se actualizaba, pero la idea es que la imagen sea aleatoria y no se repita la misma imagen en los div, sino aleatoria, y no estar agregando otro linea en el script sino sea automáticamente así tenga "X" DIV.

por favor su apoyo, quien pueda ayudarme con esto muchas gracias.

2
  • 2
    ¿y si primero desordenas el array y luego las adjudicas por orden? asi te evitas que la imagen salga repetida. 1º desordenas el array (es.stackoverflow.com/questions/402281/…) 2º metes en un for las imagenes name = random. 3º Les adjudicas el elemento i del array ¿Que tal se entiende?
    – E-Rick
    el 29 oct. 2020 a las 7:37
  • muchas gracias por tu apoyo, en la respuesta de abajo encontré la solución solo hice un pequeño cambio. el 29 oct. 2020 a las 17:42

1 respuesta 1

2

Lo que necesitas hacer es, por cada imagen generar el número aleatorio y llamar a la función pasándole ese número. Para eso necesitas capturar todas las imágenes y recorrerlas con un bucle.

<html>
<head></head>
<script >
    var imagen_random = new Array();
    imagen_random[0] = "images/1.png";
    imagen_random[1] = "images/2.png";
    imagen_random[2] = "images/3.png";
    imagen_random[3] = "images/4.png";
    imagen_random[4] = "images/5.png";
    imagen_random[5] = "images/6.png";

    function cargar_imagen_random(){
       //document.images["random"].src = imagen_random[azar];
       document.querySelectorAll('div > img').forEach(function (imagen) {
          var azar = Math.floor(Math.random() * imagen_random.length);
          imagen.src = imagen_random[azar];
       });
    }
</script>
<body onload="cargar_imagen_random()" >
    <!-- Primer div -->
    <div><img src="images/inicio.png" height="150px" /></div>

    <!-- Segundo div -->
    <div><img src="images/inicio.png" name="random" height="150px" /></div>

    <!-- Tercer div -->
    <div><img src="images/inicio.png" name="random" height="150px" /></div>
</body>
</html>

1
  • Muchas gracias, ya lo probé y todo esta como quería, solo hice un pequeño cambio, como el primer div no queria que cambie la imagen, reemplace el ('div > img') por ('#random') y en el segundo y tercer div en la etiqueta img le agregue un id="random), de esa manera obtuve lo que quería. Gracias. el 29 oct. 2020 a las 17:41

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.