random images change with every refresh made

Question

so I have linked two images in HTML from the folder: images/ however in javascript I'm trying to make these images for the dice to randomly change after every time refreshes. I'm not sure why isn't working

here is the HTML code

<div class="container">
  <h1>Refresh Me</h1>

  <div class="dice">
    <p>Player 1</p>
    <img class="img1" src="images/dice6.png">
  </div>

  <div class="dice">
    <p>Player 2</p>
    <img class="img2" src="images/dice6.png">
  </div>

    </div>

and here is the js code

imgArray = [
"dice1.png",
"dice2.png",
"dice3.png",
"dice4.png",
"dice5.png",
"dice6.png"
]


function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementByClassName("img1").src = "./images/${selectedImages}"

}

Note: I'm a new learner still trying to understand javascript. thank you for your humble reply and help. and if isn't too much to make the explanation simple so I could follow.

after fixing the code above


function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementsByClassName("img1")[0].src = './images/${selectedImages}'
}

window.onload = images;

I have problem when I refresh the page this is what it does show

enter image description here

again thank you for your help.

here what it show

okay fixed, here I did change it with

function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementsByClassName("img1")[0].src = 'images/' + selectedImages;
  document.getElementsByClassName("img2")[0].src = 'images/' + selectedImages;
}

window.onload = images;

this syntax ${selectedImages} (template literals) needs `` . It should be \`/images/${selectedImages}\` — Danail Videv, Dec 14 '21 at 14:59
It is `getElementsByClassName` not `getElementByClassName`. It also returns a collection instead of a single element so you need to access them by index e.g. `getElementsByClassName('img1')[0].src = ...` — Reyno, Dec 14 '21 at 15:03
Very helpful SO post for finding random item in array: https://stackoverflow.com/questions/5915096/get-a-random-item-from-a-javascript-array — Scollier, Dec 14 '21 at 15:09

Muhammed Jaseem · Accepted Answer · 2021-12-14T15:30:11.880

1

There are few issues here:

getElementbyClassName is not a valid function. It should be getElementsByClassName which returns an array-like collection of elements having that class name. So select the first value by writing getElementsByClassName[0].
Replace double quotes by single quotes here: 'images/' + selectedImages
Don't forget to call the function when the windows is loaded.

Final Code:

function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementsByClassName("img1")[0].src = 'images/' + selectedImages;
}

window.onload = images;

edited Dec 14 '21 at 15:30

answered Dec 14 '21 at 15:08

Muhammed Jaseem

782
6
18

1

FYI: [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) returns a (live) [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) not an array. Though the structure is similar don't expect to be able to use methods like forEach or map. – Reyno Dec 14 '21 at 15:09
thank you all for the help. i have changed the one I have mistaken with, however, when I refresh the page doesn't change anything, the dice do not change. please advice – Sami Kaddoura Dec 14 '21 at 15:11
@Reyno oh what is the correct way for the getElementsByClassName instead? – Sami Kaddoura Dec 14 '21 at 15:15
@SamiKaddoura check the updated answer – Muhammed Jaseem Dec 14 '21 at 15:17
@Reyno added that clarification. thank you. – Muhammed Jaseem Dec 14 '21 at 15:17
thank you @muhammed Jaseem for the explanation however the IMG after refreshing not change. is there something wrong I have done? – Sami Kaddoura Dec 14 '21 at 15:18
Try the updated one again? – Muhammed Jaseem Dec 14 '21 at 15:30
yes i have and now when i refresh the page doesn't show, when I refresh the page it shows there is no img – Sami Kaddoura Dec 14 '21 at 15:38
@SamiKaddoura hover on the image icon and check if it is showing the correct URL or if something is wrong with the path. – Muhammed Jaseem Dec 14 '21 at 15:40
@Muhammed Jaseem, kindly look above i linked a screen shot for what it does show in the src and advice. thanks – Sami Kaddoura Dec 14 '21 at 15:47
You are still using the old code : ) – Muhammed Jaseem Dec 14 '21 at 15:48
worked, .. @Muhammed Jaseem, yes sorry didn't notice you have updated till now, I change it and now work like a charm, thank you so much..and thank you all – Sami Kaddoura Dec 14 '21 at 15:51
Sett. Please accept the answer xD – Muhammed Jaseem Dec 14 '21 at 15:52
@muhammed Jaseem, done :D . thanks bro, – Sami Kaddoura Dec 14 '21 at 15:54

random images change with every refresh made

1 Answers1