Here is my HTML:
<link href="styles.css" rel=stylesheet>
<title>
Gallery
</title>
</head>
<body>
<div class="master">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
...
CSS:
.bg1{
height: 100%;
background-image: url("assets/pi/file-1.jpg");
background-size: contain;
margin: auto;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
max-height:100%;
max-width: 100%;
}
.bg2{
height: 100%;
background-image: url("assets/pi/file-2.jpg");
background-size: contain;
margin: auto;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
max-height:100%;
max-width: 100%;
}
...
Javascript (at the end of html before /body):
<script type="text/javascript">
function genBg() {
var randomNum;
var imagePath = new Array(359); //array to hold the image filenames
for (int i=1; i<=359; i++){
imagePath[i]= '\"assets/pi/file-'+i+'.jpg\"';// files are named as
//'file-1, file-2..so
//this loop stores the
//names in array
randomNum = Math.floor(Math.random() * 359);
var background = imagePath[randomNum]; // takes a random filename and
//stores it in var background
document.getElementsByClassName("bg1").style.backgroundImage ='url(\"'+background+'\")'; //changes filename
}
</script>
According to this code the background of div class = "bg1" should be random but it isnt working, it is taking the default background specified in the css file. I want the function to overwrite that with a random filename
replace this :
document.getElementsByClassName("bg1")
by
document.querySelector(".bg1")
and call the function
full code (i also corrected other errors) :
function genBg() { var randomNum; var imagePath = new Array(359); //array to hold the image filenames for (var i = 1; i < 359; i++) { imagePath[i] = '"assets/pi/file-' + i + '.jpg"'; // files are named as } //'file-1, file-2..so //this loop stores the //names in array randomNum = Math.floor(Math.random() * 359); var background = imagePath[randomNum]; // takes a random filename and //stores it in var background document.querySelector(".bg1").style.backgroundImage = 'url(' + background + ')'; //changes filename //this line is for debug document.querySelector(".bg1").innerHTML = background; } genBg();
.bg1 { height: 100%; background-image: url("assets/pi/file-1.jpg"); background-size: contain; margin: auto; background-attachment: fixed; background-repeat: no-repeat; background-position: center; max-height: 100%; max-width: 100%; width:200px; height:100px; border:1px solid #000; } .bg2 { height: 100%; background-image: url("assets/pi/file-2.jpg"); background-size: contain; margin: auto; background-attachment: fixed; background-repeat: no-repeat; background-position: center; max-height: 100%; max-width: 100%; }
<div class="master"> <div class="bg1"></div> <div class="bg2"></div> <div class="bg3"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.