I have an image array images having four random images,
I want to change the background-image in style of css of class contents using javascript.
for that i have created buildimage and changeImage and on onclick tried to change it .
How can i achieve it?
var images = ['/200/300/?random', '/200/300/?random', '/200/300/?random'];
var index = 0;
function buildImage() {
var img = document.createElement('img');
img.src = images[index];
document.getElementById('content').style.background - image = (img);
}
function changeImage() {
var img = document.getElementById('content').getElementsByTagName('img')[0];
index++;
index = index % 4; // This is for if this is the last image then goto first image I have 4 images so I've given 4 change accordingly
img.src = images[index];
}.contents {
width: 100px;
height: 100px;
border: 2px solid #FF0000;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
</head>
<body onload="buildImage();">
<div class="contents" id="content"></div>
<button onclick="changeImage()">NextImage</button>
</body>
</html>I have an image array images having four random images,
I want to change the background-image in style of css of class contents using javascript.
for that i have created buildimage and changeImage and on onclick tried to change it .
How can i achieve it?
var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;
function buildImage() {
var img = document.createElement('img');
img.src = images[index];
document.getElementById('content').style.background - image = (img);
}
function changeImage() {
var img = document.getElementById('content').getElementsByTagName('img')[0];
index++;
index = index % 4; // This is for if this is the last image then goto first image I have 4 images so I've given 4 change accordingly
img.src = images[index];
}.contents {
width: 100px;
height: 100px;
border: 2px solid #FF0000;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
</head>
<body onload="buildImage();">
<div class="contents" id="content"></div>
<button onclick="changeImage()">NextImage</button>
</body>
</html>3 Answers
Reset to default 4Problem :
- You don't need to create
imgtag to applybackground-imagein CSS Style - You are applying only image path
Solution : You need to apply image path between
URL()just like normal CSS background image applies
Check below code :
var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;
function buildImage() {
document.getElementById('content').style.backgroundImage = 'url('+images[index]+')';
}
function changeImage() {
index++;
if (index >= images.length) index = 0;
document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}.contents {
width: 200px;
height: 200px;
border: 2px solid #FF0000;
}<div class="contents" id="content"></div>
<button onclick="changeImage()">NextImage</button>Variable/property names can't have hyphens in them (the interpreter would see that as "subtraction", but that wouldn't make sense). The corresponding property for background-image in the JavaScript DOM API is backgroundImage:
function buildImage() {
var img = document.createElement('img');
img.src = images[index];
document.getElementById('content').style.backgroundImage = (img);
}
Change
document.getElementById('content').style.background - image = (img);
to:
document.getElementById('content').style.backgroundImage = (img);
in js, you must change first character after - to upper case.
for example:
in css: border-style
in js: borderStyle