I'm trying to display random images in four divs using code I found on SO:
<script type="text/javascript>
function get_image(div_id){
var imgCount = 3;
var dir = 'images/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.jpg",
images[2] = "2.jpg",
images[3] = "3.jpg",
document.getElementById(div_id).style.backgroundImage = "url(" + dir + images[randomCount] + ")";
console.log("div_id = " + div_id)
}
</script>
The divs are supposed to call the function like this:
<div class="image_holder" id="left_top">
<script id="lt_innerscript">
var div_id = document.getElementById("lt_innerscript").parentElement.id;
var myVar = setInterval(function() { get_image(div_id); }, 800);
</script>
</div>
However, only the last div is displaying an image while the others remain blank. What could be causing this issue?
CSS styles have been applied to two separate divs with ids "left" and "right."
#left{
float: left;
background: blue;
width: 300px;
height: 100%;
color: #005CB9;
}
and
.image_holder {
position: relative;
width: 300px;
height: 256px;
}