0

Quiero que cada vez que actualice la pagina y se aplique el random la imagen aparezca con su respectivo titulo y descripción. Por ejemplo la primera imagen es un bosque y quiero que cuando actualice su titulo sea bosque y su descripción este es un bosque. Ojala puedan entender a que me refiero

<div class="item-slide">
            <script>
            function shuffleArray(inputArray){
            inputArray.sort(()=> Math.random() -0.5);
            }

            var image = [0, 1, 2, 3, 4];
            var titulo = [0, 1, 2, 3, 4 ];
            var descripcion = [0, 1, 2, 3, 4];
            image[0]="img-1.jpg";
            image[1]="img-2.jpg";
            image[2]="img-3.jpg";
            image[3]="img-4.jpg";
            image[4]="img-5.jpg";
            
            titulo[0] = "Bosque";
            titulo[1] = "Atardecer";
            titulo[2] = "Olas";
            titulo[3] = "Desierto";
            titulo[4] = "Volcan";
            
            descripcion[0] = "Esto es un Bosque";
            descripcion[1] = "Esto es un Atardecer";
            descripcion[2] = "Estos son unas Olas";
            descripcion[3] = "Esto es un Desierto";
            descripcion[4] = "Esto es un Volcan";
            
            shuffleArray(image);
            shuffleArray(titulo);
            shuffleArray(descripcion);
            
            document.write("<IMG SRC=" +image[0] +" WIDTH=1000 HEIGHT=421 BORDER=0>");
            </script>
            <div class="message">
                <h2>
                    <script>                
                    document.write(titulo[0]);
                    </script>
                </h2>
                <p>
                    <script>
                    document.write(descripcion[0]);
                    </script>
                </p>
            </div>
        </div>
3
  • ¿Qué has intentado? el 22 jul. 2021 a las 7:27
  • 2
    Estás intentando randomizar 3 array diferentes, y pretendes que coincidan? Pero si tú mismo los estás mezclando por separado... cómo van a coincidir?? Tienes dos opciones, obtener un número aleatorio y usarlo como índice para los tres array en vez de mezclar los tres array aleatoriamente, o crear un array de objetos que lleven la imagen, el título y la descripción, mezclar ese array de objetos y obtener el que te interese... y ahí ya tendrás todo juntito.
    – Benito-B
    el 22 jul. 2021 a las 7:52
  • 1
    Para que entiendas, lo que estás haciendo es como tirar 3 dados diferentes y decirme "Quiero que cuando los tire, los 3 saquen el mismo número porque es la primera vez que los tiro todos". No funciona así, cada uno sacará el valor que saque. Lo que puedes hacer es tirar un solo dado y utilizar su valor las veces que necesites!
    – Benito-B
    el 22 jul. 2021 a las 7:54

1 respuesta 1

4

En lugar de 3 arrays utilizaria un solo array donde cada item tenga 3 propiedades: imagen,titulo y descripción.

let imagenes = [{imagen:"url1",titulo:"titulo1",descripcion:"descripcion1"},{imagen:"url2",titulo:"titulo2",descripcion:"descripcion2"}...]

En lugar de utilizar shuffle puedes escoger un item al azar utilizando

let imagen = imagenes[Math.floor(Math.random()*imagenes.length)];

ahora puedes recuperar la imagen con:

let html = `<img src="${imagen.url}" alt="${imagen.descripcion}" />`

Además en lugar de document.write utiliza innerHTML

document.querySelector("h1").innerHTML = imagen.titulo
1
  • No me sirvió para lo que necesito de todas formas gracias el 22 jul. 2021 a las 19:35

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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