1

Tengo un JS con el cual, cada que hago refresh a la pagina se cambia la imagen aleatoriamente.

El problema es que afecta todas las demas imagenes dentro del index.

Como le puedo hacer para que solo afecte una imagen en especifico.

El JS es:

<script >
var imagen_random = new Array();
imagen_random[0] = "imagen0";
imagen_random[1] = "imagen1";
imagen_random[2] = "imagen2";
imagen_random[3] = "imagen3";
imagen_random[4] = "imagen4";
imagen_random[5] = "imagen5";

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];
   });
}

2 respuestas 2

0

Cuando tu quieres identificar "algo" en especifico y ese "algo" es único, lo que necesitas es una id y por supuesto la id no debe repetirse

<img id="imagenRandom" >

Luego con esta id tu puedes buscar ese elemento, de cualquiera de estas manera

let elemento = document.getElementById("imagenRandom")
let elemento = document.querySelector("#imagenRandom")

//o simplemente con su nombre, pero hay que tener cuidado con esta forma
imagenRandom.src="algo.png"

Tu función queda así;

function cargar_imagen_random(){
   //document.images["random"].src = imagen_random[azar];
   let elemento = document.getElementById("imagenRandom")
   var azar = Math.floor(Math.random() * imagen_random.length);
   elemento.src = imagen_random[azar];
}

Ahora si quisieras los mismo, pero en un conjunto de elementos, ocupas una clase

<img class="imagenRandom" >
<img class="imagenRandom" >
<img class="imagenRandom" >

Y tu función queda muy similar a la que tienes tu

function cargar_imagen_random(){
   //document.images["random"].src = imagen_random[azar];
   document.querySelectorAll('.imagenRandom').forEach(function (imagen) {
      var azar = Math.floor(Math.random() * imagen_random.length);
      imagen.src = imagen_random[azar];
   });
}
0

Si quieres cambiar aleatoriamente una única imagen, puedes hacerlo

  • Poniendo un atributo id en el tag de dicha imagen.
  • Obteniendo dicho elemento con el método getElementById de la interfaz document.

Recuerda que el id de cada tag debe ser único en todo el documento HTML.

Este ejemplo realiza dicha función:

var imagen_random = new Array();
imagen_random.push("https://i.imgur.com/EuSgXXVm.jpeg");
imagen_random.push("https://i.imgur.com/1STOIH9m.jpeg");
imagen_random.push("https://i.imgur.com/kXF8y4Im.jpeg");
imagen_random.push("https://i.imgur.com/TDS7fQ0m.jpeg");
imagen_random.push("https://i.imgur.com/dnjR2mUm.jpeg");
imagen_random.push("https://i.imgur.com/NxxG7Hfm.jpeg");
imagen_random.push("https://i.imgur.com/xVPBUCKm.jpeg");
imagen_random.push("https://i.imgur.com/NmibNuAm.jpeg");
imagen_random.push("https://i.imgur.com/2xSOJvnm.jpeg");

function cargar_imagen_random(){
   var azar = Math.floor(Math.random() * imagen_random.length);
   var imagen = document.getElementById("imgInsectoRandom");
   imagen.src = imagen_random[azar];
}

cargar_imagen_random();
<figure>
  <img id="imgInsectoRandom" src="" alt="Algún insecto">
  <figcaption>Algún insecto (real o no)</figcaption>
</figure>
<figure>
  <img src="https://i.imgur.com/DAuBLNTm.jpeg" alt="Caballos">
  <figcaption>Caballos</figcaption>
</figure>

Por el contrario, si quieres poner varias imagenes random, puedes colocarle a todas la misma clase CSS, de manera que puedas obtener un arreglo de ellas con el método querySelectorAll y la notación .NombreDeClase como selector, y finalmente utilizar un foreach como ya haces en el código de tu pregunta, por ejemplo:

var imagen_random = new Array();
imagen_random.push("https://i.imgur.com/EuSgXXVm.jpeg");
imagen_random.push("https://i.imgur.com/1STOIH9m.jpeg");
imagen_random.push("https://i.imgur.com/kXF8y4Im.jpeg");
imagen_random.push("https://i.imgur.com/TDS7fQ0m.jpeg");
imagen_random.push("https://i.imgur.com/dnjR2mUm.jpeg");
imagen_random.push("https://i.imgur.com/NxxG7Hfm.jpeg");
imagen_random.push("https://i.imgur.com/xVPBUCKm.jpeg");
imagen_random.push("https://i.imgur.com/NmibNuAm.jpeg");
imagen_random.push("https://i.imgur.com/2xSOJvnm.jpeg");

function cargar_imagen_random(){
   document.querySelectorAll('.InsectoRandom').forEach(function (imagen) {
      var azar = Math.floor(Math.random() * imagen_random.length);
      imagen.src = imagen_random[azar];
   });
}

cargar_imagen_random();
<figure>
  <img id="imgInsectoRandom1" class="InsectoRandom" src="" alt="Algún insecto">
  <figcaption>Algún insecto (real o no)</figcaption>
</figure>
<figure>
  <img id="imgInsectoRandom2" class="InsectoRandom" src="" alt="Algún insecto">
  <figcaption>Otro insecto (¿real?)</figcaption>
</figure>
<figure>
  <img src="https://i.imgur.com/DAuBLNTm.jpeg" alt="Caballos">
  <figcaption>Caballos</figcaption>
</figure>
<figure>
  <img src="https://i.imgur.com/REbIzu1m.jpeg" alt="Caballos">
  <figcaption>Caballo solo</figcaption>
</figure>

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.