Displaying random image with JS from an array

Asked Nov 09 '22 at 19:13

Active Nov 10 '22 at 00:35

Viewed 29 times

So far it doesn't display anything. I'm guessing I'm missing something with src but I don't quite get it yet.

function display_pic() {
  var arr_images = [
    './assets/arb_01.png',
    './assets/arb_02.png',
    './assets/arb_03.png'
  ];

  var index = Math.floor(Math.random() * arr_images.length);

  $('.random_image').css({
    'background': arr_images[index],
    'background-position': '100%',
  });

}

window.onload = display_pic();

edited Nov 10 '22 at 00:35

asked Nov 09 '22 at 19:13

fbb

Your 'HTML' was the JS copied twice. I edited the question to remove it. – Rory McCrossan Nov 09 '22 at 19:15
2

Regarding the issue, you're setting a CSS properties named `theimage` and `theimage-position`. These do not exist and will have no effect. If you want to set the `img` source, set the `src` property. – Rory McCrossan Nov 09 '22 at 19:16
To set a background the value needs to be in the format: `url('path/to/yourimage.jpg)` – Rory McCrossan Nov 10 '22 at 08:53

Displaying random image with JS from an array

0 Answers0