How to change the 'src' value of a few <img> tags using the 'for loop'?

Question

Each 'dice' is supposed to display a random picture from an array of pictures. How to change the value of the src attribute of each <img> tag using the for loop ?

I was trying to use the for loop but it doesn't work...

Thank you for your tips and help.

 const dice1 = document.getElementById('dice1');
 const dice2 = document.getElementById('dice2');
 const dice3 = document.getElementById('dice3');
 const dice4 = document.getElementById('dice4');
 const dice5 = document.getElementById('dice5');
 const dice6 = document.getElementById('dice6');
 const button = document.getElementById('button');

const imgs = [dice1, dice2, dice3, dice4, dice5, dice6];

let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 
'https://i.postimg.cc/QKGQPzZx/Man.jpg', 
'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 
'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 
'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 
'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 
'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg',
'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 
'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'];


const display = (arr) => {
    for (let i = 0; i > arr.length; i++){
       return i.src = pics[Math.floor(Math.random() * pics.length)]
    }
 }

button.onclick = display(imgs) 

Answer 1

There is a number of issues in your code:

button.onclick = display(imgs)

button.onclick should be set to the function itself, and not the value of it when it runs on a given value. What you could do is use .bind instead.

for (let i = 0; i > arr.length; i++){

i starts at 0 , which means it will always be lower than arr.length , and so this loop will never run.

i.src = ...

i is a variable that contains a number, not the image with index i . You probably want to use imgs[i] here instead, which references image no. i .

---

This is one way to apply the fixes I've proposed above:

 const dice1 = document.getElementById('dice1'); const dice2 = document.getElementById('dice2'); const dice3 = document.getElementById('dice3'); const dice4 = document.getElementById('dice4'); const dice5 = document.getElementById('dice5'); const dice6 = document.getElementById('dice6'); const button = document.getElementById('button'); const imgs = [dice1, dice2, dice3, dice4, dice5, dice6]; let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 'https://i.postimg.cc/QKGQPzZx/Man.jpg', 'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg', 'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg']; const display = () => { for (let i = 0; i < imgs.length; i++) { imgs[i].src = pics[Math.floor(Math.random() * pics.length)] } }; button.onclick = display; 

 <button id="button">Roll the dice</button> <img id="dice1"/> <img id="dice2"/> <img id="dice3"/> <img id="dice4"/> <img id="dice5"/> <img id="dice6"/> 

---

Edit: To avoid repeating the same image, use .splice after calculating the random index of the picture (as @CertainPerformance suggested):

 const dice1 = document.getElementById('dice1'); const dice2 = document.getElementById('dice2'); const dice3 = document.getElementById('dice3'); const dice4 = document.getElementById('dice4'); const dice5 = document.getElementById('dice5'); const dice6 = document.getElementById('dice6'); const button = document.getElementById('button'); const imgs = [dice1, dice2, dice3, dice4, dice5, dice6]; let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 'https://i.postimg.cc/QKGQPzZx/Man.jpg', 'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg', 'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg']; const display = () => { const picsClone = pics.slice(); // To avoid removing image URLs from the `pics` array for (let i = 0; i < imgs.length; i++) { imgs[i].src = picsClone.splice(Math.floor(Math.random() * picsClone.length), 1); } }; button.onclick = display; 

 <button id="button">Roll the dice</button> <img id="dice1"/> <img id="dice2"/> <img id="dice3"/> <img id="dice4"/> <img id="dice5"/> <img id="dice6"/> 

Answer 2

Numeric-indexed id s in a document are usually a bad idea; consider using classes instead. Also, rather than a for loop (which requires manual iteration, and doesn't have any abstraction), consider using forEach instead:

const dice = document.querySelectorAll('.dice');
button.onclick = () => {
  dice.forEach((die) => {
    die.src = pics[Math.floor(Math.random() * pics.length)]
  });
};

 const dice = document.querySelectorAll('.dice'); const pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 'https://i.postimg.cc/QKGQPzZx/Man.jpg', 'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg', 'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg' ]; const button = document.querySelector('#button'); button.onclick = () => { dice.forEach((die) => { die.src = pics[Math.floor(Math.random() * pics.length)] }); }; 

 <img class="dice"> <img class="dice"> <img class="dice"> <img class="dice"> <img class="dice"> <img class="dice"> <button id="button">Roll the dice</button> 

To ensure images aren't repeated, every time the button is clicked, make a copy of the array, then splice out the selected item:

const [src] = picsCopy.splice(Math.floor(Math.random() * picsCopy.length), 1);
die.src = src;

 const dice = document.querySelectorAll('.dice'); const pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 'https://i.postimg.cc/QKGQPzZx/Man.jpg', 'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg', 'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg' ]; const button = document.querySelector('#button'); button.onclick = () => { const picsCopy = pics.slice(); dice.forEach((die) => { const [src] = picsCopy.splice(Math.floor(Math.random() * picsCopy.length), 1); die.src = src; }); }; 

 <img class="dice"> <img class="dice"> <img class="dice"> <img class="dice"> <img class="dice"> <img class="dice"> <button id="button">Roll the dice</button>