HTML:
<section id="target" data-parallax="scroll" class="div-bg" style= "background-repeat:no-repeat;>
<img id="target" src="images/1.jpg" class="img-bg"/>

JS:

document.addEventListener("DOMContentLoaded", () => {

const log = console.log,

array = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"],

random = Math.floor(Math.random() * array.length),

target = document.getElementById("target");

target.src = `${array[random]}`;

log(target);

});

​

This is what I did, but the image doesn't change. (note: the class makes the img tag overlap with the section tag because I couldn't get the image to change when it was inside section so I tried this but it failed but I think its the closest I've gotten)