Develop Reference

adding a class to body in jquery fails in javascript methods

below is my scenario
I have three classes box with randomly selected image and from array items, there is a square box002 at right lower portion, this can be drag and droppped to any of three box if it find match the box will dissappear. likwise three box will dissappear.
then a class bodyblue is added to body with backgroundImage named middle bg is added to body for 10 seconds . after again 3 box appear for drag and drop.
in the second level after this three boxes are dragged&dropped and deleted, when bodyblue is added to body the backgroundImage middle bg is not appearing in for 10 seconds.
How to add bodyblue backgroundImage to body using jquery in second level and third level?
var array2 = [];
var arraycart = [];
var disparray = [];
var bg = [];
var dataURL;
var timeOut;
counter = 0;
var items = [{
label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label: '3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label: '4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label: '5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label: '6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url:'https://via.placeholder.com/150x150.jpg?text=image7'},
{label: '8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label: '9',url:'https://via.placeholder.com/150x150.jpg?text=image9'},
{label:'10',url:'https://via.placeholder.com/150x150.jpg?text=image10'}
];
var notes = ['https://via.placeholder.com/150x150.jpg?text=image1',
'https://via.placeholder.com/150x150.jpg?text=image2',
'https://via.placeholder.com/150x150.jpg?text=image3',
'https://via.placeholder.com/150x150.jpg?text=image4',
'https://via.placeholder.com/150x150.jpg?text=image5',
'https://via.placeholder.com/150x150.jpg?text=image6',
'https://via.placeholder.com/150x150.jpg?text=image7',
'https://via.placeholder.com/150x150.jpg?text=image8',
'https://via.placeholder.com/150x150.jpg?text=image9',
'https://via.placeholder.com/150x150.jpg?text=image10'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
//change backgroundImage
function changemainbackground() {
bodycontents = document.getElementById('main');
if (counter >= 0) {
bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
d = bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
}
counter++;
}
hiddenimgnumber = 0;
var images = ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'];
//var bg=['https://via.placeholder.com/150x150.jpg?text=image1','https://via.placeholder.com/150x150.jpg?text=image2'];
var bg = ['https://picsum.photos/200/300?image=2', 'https://picsum.photos/200/300?image=3', 'https://picsum.photos/200/300?image=4'];
var refreshIntervalId = setInterval(function() {
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
}, 1)
function hiddenimage() {
clearInterval(refreshIntervalId);
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
//console.log(hiddenimgnumber);
hiddenimgnumber++;
}
window.onload = function() {}
function rvalue() {
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
//debugger;
elements[i].style.border = "2px solid #c57232 ";
elements[i].style.borderBottom = "5px solid #c57232 ";
//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
}
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
if (array2.length === 0) {
alert('Game completed');
return;
}
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
array2.splice(randomIndex, 1);
try {
//ptags[index].style.visibility = "visible";
//ptags[index].textContent = "RS."+item.label;
ptags[index].dataset.itemLabel = item.label;
//using label as an identity
tempimages.push({
data: item,
label: item.label
});
notesselected.push({
data: item.url,
label: item.label
});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
// console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
if (tempimages.length === 0) {
image = document.getElementById('slide');
image.style.display = 'none';
return;
}
var arr2 = tempimages;
item = arr2[Math.floor(Math.random() * arr2.length)]
image = document.getElementById('slide');
//getting notes item
//console.log(item);
///////console.log(item.label);
var dataURL = notes.filter(a => a.indexOf("?text=" + item.label) > 0)[0];
//var dataURL =item.url;
//var dataURL = item.label;
console.log(dataURL);
image.src = dataURL;
image.dataset.itemLabel = item.label;
} catch (err) {
}
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var x = document.getElementById("slide").dataset.itemLabel;
var y = ev.target.dataset.itemLabel;
if (ev.target.tagName === "DIV") {
y = ev.target.children[0].dataset.itemLabel;
}
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
tempimages = tempimages.filter(a => a.label !== item.label);
if (tempimages.length == 0) {
rvalue();
hiddenimage();
animateCongrat();
}
displayAllImages();
} else {
}
}
//animate congarat starts here
var timeOut;
function animateCongrat() {
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
hideCongratAndBlueBody();
}
function addBlueBody() {
$("html").css("background-color", " #070755 ");
$('body').addClass('bodyblue')
$('#container').hide();
$('#2container').hide();
$('#3container').hide();
$('#2').hide();
$('.completed').hide();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$("html").css("background-color", "");
$('body').removeClass('bodyblue')
$('#container').show();
$('#2container').show();
$('#3container').show();
$('#2').show();
$('.completed').hide();
changemainbackground();
}, 10000);
}
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
.bodyblue {
background-image: url(https://via.placeholder.com/1000x600?text=Middle+bg);
height: 100vh;
width: 100vw;
}
ul {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.box {
width: calc(33.3% - 4px);
border-radius: 5px;
border: #000 border-color: #e6e600;
margin: -2px;
background-color: #99ffff;
height: 16vh;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.box002 {
position: absolute;
top: 40.3vh;
left: 50.98vw;
cursor: pointer;
border: 2px solid black;
}
.box002 img {
width: 15.0vw;
height: 15.0vh;
border-radius: 0%;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 29.0vw;
position: fixed;
top: 23.9vh;
left: 19.2vw;
}
body {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: 100vw 100vh;
}
.reset img:hover {
opacity: 1
}
.hiddenimage {
position: absolute;
top: 4.3vh;
left: 50vw;
cursor: pointer;
}
.hiddenimage img {
width: 10.3vw;
height: 10.5vh;
border-radius: 15%;
}
.hand {
position: absolute;
top: 45.3vh;
left: 17vw;
cursor: pointer;
}
.hand img {
width: 25.3vw;
height: 25.5vh;
border-radius: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="main">
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>
<div class="congrats">
<div class="hiddenimage" style="display:none;">
<img src="" id="hiddenimageid" />
</div>
</div>
</body>

The problem is not that you are not applying bodyblue class to body. bodyblue class is applied 2nd time also. But after 1st time, you set a background-image to body via javascript. Which is a more 'powerfull' style than with css. It has a higher priority so it overrides the styles from css in the 2nd attempt.
So you could use a more specific selector body#main.bodyblue in CSS or even !important.
See below
var array2 = [];
var arraycart = [];
var disparray = [];
var bg = [];
var dataURL;
var timeOut;
counter = 0;
var items = [{
label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label: '3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label: '4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label: '5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label: '6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url:'https://via.placeholder.com/150x150.jpg?text=image7'},
{label: '8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label: '9',url:'https://via.placeholder.com/150x150.jpg?text=image9'},
{label:'10',url:'https://via.placeholder.com/150x150.jpg?text=image10'}
];
var notes = ['https://via.placeholder.com/150x150.jpg?text=image1',
'https://via.placeholder.com/150x150.jpg?text=image2',
'https://via.placeholder.com/150x150.jpg?text=image3',
'https://via.placeholder.com/150x150.jpg?text=image4',
'https://via.placeholder.com/150x150.jpg?text=image5',
'https://via.placeholder.com/150x150.jpg?text=image6',
'https://via.placeholder.com/150x150.jpg?text=image7',
'https://via.placeholder.com/150x150.jpg?text=image8',
'https://via.placeholder.com/150x150.jpg?text=image9',
'https://via.placeholder.com/150x150.jpg?text=image10'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
//change backgroundImage
function changemainbackground() {
bodycontents = document.getElementById('main');
if (counter >= 0) {
bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
d = bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
}
counter++;
}
hiddenimgnumber = 0;
var images = ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'];
//var bg=['https://via.placeholder.com/150x150.jpg?text=image1','https://via.placeholder.com/150x150.jpg?text=image2'];
var bg = ['https://picsum.photos/200/300?image=2', 'https://picsum.photos/200/300?image=3', 'https://picsum.photos/200/300?image=4'];
var refreshIntervalId = setInterval(function() {
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
}, 1)
function hiddenimage() {
clearInterval(refreshIntervalId);
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
//console.log(hiddenimgnumber);
hiddenimgnumber++;
}
window.onload = function() {}
function rvalue() {
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
//debugger;
elements[i].style.border = "2px solid #c57232 ";
elements[i].style.borderBottom = "5px solid #c57232 ";
//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
}
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
if (array2.length === 0) {
alert('Game completed');
return;
}
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
array2.splice(randomIndex, 1);
try {
//ptags[index].style.visibility = "visible";
//ptags[index].textContent = "RS."+item.label;
ptags[index].dataset.itemLabel = item.label;
//using label as an identity
tempimages.push({
data: item,
label: item.label
});
notesselected.push({
data: item.url,
label: item.label
});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
// console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
if (tempimages.length === 0) {
image = document.getElementById('slide');
image.style.display = 'none';
return;
}
var arr2 = tempimages;
item = arr2[Math.floor(Math.random() * arr2.length)]
image = document.getElementById('slide');
//getting notes item
//console.log(item);
///////console.log(item.label);
var dataURL = notes.filter(a => a.indexOf("?text=" + item.label) > 0)[0];
//var dataURL =item.url;
//var dataURL = item.label;
//console.log(dataURL);
image.src = dataURL;
image.dataset.itemLabel = item.label;
} catch (err) {
}
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var x = document.getElementById("slide").dataset.itemLabel;
var y = ev.target.dataset.itemLabel;
if (ev.target.tagName === "DIV") {
y = ev.target.children[0].dataset.itemLabel;
}
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
tempimages = tempimages.filter(a => a.label !== item.label);
if (tempimages.length == 0) {
rvalue();
hiddenimage();
animateCongrat();
}
displayAllImages();
} else {
}
}
//animate congarat starts here
var timeOut;
function animateCongrat() {
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
hideCongratAndBlueBody();
}
function addBlueBody() {
$("html").css("background-color", " #070755 ");
$('body').addClass('bodyblue')
$('#container').hide();
$('#2container').hide();
$('#3container').hide();
$('#2').hide();
$('.completed').hide();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$("html").css("background-color", "");
$('body').removeClass('bodyblue')
$('#container').show();
$('#2container').show();
$('#3container').show();
$('#2').show();
$('.completed').hide();
changemainbackground();
}, 10000);
}
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
body#main.bodyblue {
background-image: url(https://via.placeholder.com/1000x600?text=Middle+bg)!important;
height: 100vh;
width: 100vw;
}
ul {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.box {
width: calc(33.3% - 4px);
border-radius: 5px;
border: #000 border-color: #e6e600;
margin: -2px;
background-color: #99ffff;
height: 16vh;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.box002 {
position: absolute;
top: 40.3vh;
left: 50.98vw;
cursor: pointer;
border: 2px solid black;
}
.box002 img {
width: 15.0vw;
height: 15.0vh;
border-radius: 0%;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 29.0vw;
position: fixed;
top: 23.9vh;
left: 19.2vw;
}
body {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: 100vw 100vh;
}
.reset img:hover {
opacity: 1
}
.hiddenimage {
position: absolute;
top: 4.3vh;
left: 50vw;
cursor: pointer;
}
.hiddenimage img {
width: 10.3vw;
height: 10.5vh;
border-radius: 15%;
}
.hand {
position: absolute;
top: 45.3vh;
left: 17vw;
cursor: pointer;
}
.hand img {
width: 25.3vw;
height: 25.5vh;
border-radius: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="main">
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>
<div class="congrats">
<div class="hiddenimage" style="display:none;">
<img src="" id="hiddenimageid" />
</div>
</div>
</body>

Adding backgroundImage to body in jquery in second loop not working

I have three classes box with randomly selected image and from array items, there is a square box002 at right lower portion, this can be drag and droppped to any of three box if it find match the box will dissappear . likwise three box will dissappear.
then a class bodyblue is added to body with backgroundImage named middle bg is added to body for 10 seconds . after again 3 box appear for drag and drop.
in the second level after this three boxes are dragged&dropped and deleted, when bodyblue is added to body the backgroundImage middle bg is not appearing in for 10 seconds.
How to add bodyblue backgroundImage to body using jquery in second level and third level?
var array2 = [];
var arraycart = [];
var disparray = [];
var bg = [];
var dataURL;
var timeOut;
counter = 0;
var items = [{
label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label: '3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label: '4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label: '5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label: '6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url:'https://via.placeholder.com/150x150.jpg?text=image7'},
{label: '8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label: '9',url:'https://via.placeholder.com/150x150.jpg?text=image9'},
{label:'10',url:'https://via.placeholder.com/150x150.jpg?text=image10'}
];
var notes = ['https://via.placeholder.com/150x150.jpg?text=image1',
'https://via.placeholder.com/150x150.jpg?text=image2',
'https://via.placeholder.com/150x150.jpg?text=image3',
'https://via.placeholder.com/150x150.jpg?text=image4',
'https://via.placeholder.com/150x150.jpg?text=image5',
'https://via.placeholder.com/150x150.jpg?text=image6',
'https://via.placeholder.com/150x150.jpg?text=image7',
'https://via.placeholder.com/150x150.jpg?text=image8',
'https://via.placeholder.com/150x150.jpg?text=image9',
'https://via.placeholder.com/150x150.jpg?text=image10'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
//----------------------------------------------change backgroundImage----------------------------------------------------------
function changemainbackground() {
debugger;
var c = document.getElementById('main');
var img = document.getElementById('main'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
// Display the url to the user
//console.log('Image URL: ' + bi);
bodycontents = document.getElementById('main');
if (counter >= 0) {
bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
d = bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
//console.log(d);
}
counter++;
//console.log("counter is"+counter);
//console.log(bodycontents);
//console.log(d);
}
//--------------------------^^^^^change backgroundImage end here^^^^^^^--------------------------------------------------------
//----------------------------------------------hiddenImage------------------------------------------------------------------------
hiddenimgnumber = 0;
var images = ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'];
//var bg=['https://via.placeholder.com/150x150.jpg?text=image1','https://via.placeholder.com/150x150.jpg?text=image2'];
var bg = ['https://picsum.photos/200/300?image=2', 'https://picsum.photos/200/300?image=3', 'https://picsum.photos/200/300?image=4'];
var refreshIntervalId = setInterval(function() {
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
}, 1)
function hiddenimage() {
clearInterval(refreshIntervalId);
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
//console.log(hiddenimgnumber);
hiddenimgnumber++;
}
//-------------------------------------------------^^^hidden Image ends^^^------------------------------------------------------
window.onload = function() {}
function rvalue() {
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
//debugger;
elements[i].style.border = "2px solid #c57232 ";
elements[i].style.borderBottom = "5px solid #c57232 ";
//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
}
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
//if array length is 0 then we need to identify the game as completed
if (array2.length === 0) {
alert('Game completed');
return;
}
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
array2.splice(randomIndex, 1);
try {
//ptags[index].style.visibility = "visible";
//ptags[index].textContent = "RS."+item.label;
ptags[index].dataset.itemLabel = item.label;
//using label as an identity
tempimages.push({
data: item,
label: item.label
});
notesselected.push({
data: item.url,
label: item.label
});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
// console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
if (tempimages.length === 0) {
image = document.getElementById('slide');
image.style.display = 'none';
return;
}
// getting random item from the available items
var arr2 = tempimages;
item = arr2[Math.floor(Math.random() * arr2.length)]
image = document.getElementById('slide');
//getting notes item
//console.log(item);
///////console.log(item.label);
var dataURL = notes.filter(a => a.indexOf("?text=" + item.label) > 0)[0];
//var dataURL =item.url;
//var dataURL = item.label;
console.log(dataURL);
image.src = dataURL;
image.dataset.itemLabel = item.label;
} catch (err) {
//console.log(err.message);
}
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var x = document.getElementById("slide").dataset.itemLabel;
var y = ev.target.dataset.itemLabel;
//add improvisation box drag is valid
if (ev.target.tagName === "DIV") {
y = ev.target.children[0].dataset.itemLabel;
}
//console.log(x);
//console.log(y);
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
tempimages = tempimages.filter(a => a.label !== item.label);
if (tempimages.length == 0) {
rvalue();
hiddenimage();
animateCongrat();
}
displayAllImages();
} else {
}
}
//----------------------------->>>animate congarat starts here-------------------------------------------------------------
var timeOut;
function animateCongrat() {
//debugger;
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
hideCongratAndBlueBody();
}
function addBlueBody() {
$("html").css("background-color", " #070755 ");
$('body').addClass('bodyblue')
//console.log(url);
$('#container').hide();
$('#2container').hide();
$('#3container').hide();
$('#2').hide();
$('.completed').hide();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$("html").css("background-color", "");
$('body').removeClass('bodyblue')
$('#container').show();
$('#2container').show();
$('#3container').show();
$('#2').show();
$('.completed').hide();
changemainbackground();
}, 10000);
}
//----------------------------->>>animate congarat ends here-------------------------------------------------------------
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
.bodyblue {
background-image: url(https://via.placeholder.com/1000x600?text=Middle+bg);
height: 100vh;
width: 100vw;
}
ul {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.box {
width: calc(33.3% - 4px);
border-radius: 5px;
border: #000 border-color: #e6e600;
margin: -2px;
background-color: #99ffff;
height: 16vh;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.box002 {
position: absolute;
top: 40.3vh;
left: 50.98vw;
cursor: pointer;
border: 2px solid black;
}
.box002 img {
width: 15.0vw;
height: 15.0vh;
border-radius: 0%;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 29.0vw;
position: fixed;
top: 23.9vh;
left: 19.2vw;
}
body {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: 100vw 100vh;
}
.reset img:hover {
opacity: 1
}
.hiddenimage {
position: absolute;
top: 4.3vh;
left: 50vw;
cursor: pointer;
}
.hiddenimage img {
width: 10.3vw;
height: 10.5vh;
border-radius: 15%;
}
.hand {
position: absolute;
top: 45.3vh;
left: 17vw;
cursor: pointer;
}
.hand img {
width: 25.3vw;
height: 25.5vh;
border-radius: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>
<div class="congrats">
<div class="hiddenimage" style="display:none;">
<img src="" id="hiddenimageid" />
</div>
</div>

adding class to body in jquery not working

I have three class boxes with a randomly selected image and from array items. There is a square box002 at right lower portion, this can be drag and dropped to any of three boxes. If it finds a match, the box will disappear, likewise, box three will disappear.
Then a class named bodyblue is added to the body with a backgroundImage named middle bg is added to body for 10 seconds. After again box three appears for drag and drop.
The problem I am having is:
In the second level after three boxes are dragged & dropped and deleted, when bodyblue is added to body the backgroundImage middle bg is not appearing in for 10 seconds.
How do I add bodyblue backgroundImage to body using jquery in second level and third level?
var array2 = [];
var arraycart = [];
var disparray = [];
var bg = [];
var dataURL;
var timeOut;
counter = 0;
var items = [{
label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label: '3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label: '4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label: '5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label: '6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url:'https://via.placeholder.com/150x150.jpg?text=image7'},
{label: '8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label: '9',url:'https://via.placeholder.com/150x150.jpg?text=image9'},
{label:'10',url:'https://via.placeholder.com/150x150.jpg?text=image10'}
];
var notes = ['https://via.placeholder.com/150x150.jpg?text=image1',
'https://via.placeholder.com/150x150.jpg?text=image2',
'https://via.placeholder.com/150x150.jpg?text=image3',
'https://via.placeholder.com/150x150.jpg?text=image4',
'https://via.placeholder.com/150x150.jpg?text=image5',
'https://via.placeholder.com/150x150.jpg?text=image6',
'https://via.placeholder.com/150x150.jpg?text=image7',
'https://via.placeholder.com/150x150.jpg?text=image8',
'https://via.placeholder.com/150x150.jpg?text=image9',
'https://via.placeholder.com/150x150.jpg?text=image10'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
//change backgroundImage
function changemainbackground() {
bodycontents = document.getElementById('main');
if (counter >= 0) {
bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
d = bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
}
counter++;
}
hiddenimgnumber = 0;
var images = ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'];
//var bg=['https://via.placeholder.com/150x150.jpg?text=image1','https://via.placeholder.com/150x150.jpg?text=image2'];
var bg = ['https://picsum.photos/200/300?image=2', 'https://picsum.photos/200/300?image=3', 'https://picsum.photos/200/300?image=4'];
var refreshIntervalId = setInterval(function() {
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
}, 1)
function hiddenimage() {
clearInterval(refreshIntervalId);
image = document.getElementById('hiddenimageid');
image.src = images[hiddenimgnumber];
//console.log(hiddenimgnumber);
hiddenimgnumber++;
}
window.onload = function() {}
function rvalue() {
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
//debugger;
elements[i].style.border = "2px solid #c57232 ";
elements[i].style.borderBottom = "5px solid #c57232 ";
//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
}
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
if (array2.length === 0) {
alert('Game completed');
return;
}
for (var index = 0; index < 3; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
array2.splice(randomIndex, 1);
try {
//ptags[index].style.visibility = "visible";
//ptags[index].textContent = "RS."+item.label;
ptags[index].dataset.itemLabel = item.label;
//using label as an identity
tempimages.push({
data: item,
label: item.label
});
notesselected.push({
data: item.url,
label: item.label
});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
// console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
if (tempimages.length === 0) {
image = document.getElementById('slide');
image.style.display = 'none';
return;
}
var arr2 = tempimages;
item = arr2[Math.floor(Math.random() * arr2.length)]
image = document.getElementById('slide');
//getting notes item
//console.log(item);
///////console.log(item.label);
var dataURL = notes.filter(a => a.indexOf("?text=" + item.label) > 0)[0];
//var dataURL =item.url;
//var dataURL = item.label;
console.log(dataURL);
image.src = dataURL;
image.dataset.itemLabel = item.label;
} catch (err) {
}
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var x = document.getElementById("slide").dataset.itemLabel;
var y = ev.target.dataset.itemLabel;
if (ev.target.tagName === "DIV") {
y = ev.target.children[0].dataset.itemLabel;
}
if (x == y) {
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
tempimages = tempimages.filter(a => a.label !== item.label);
if (tempimages.length == 0) {
rvalue();
hiddenimage();
animateCongrat();
}
displayAllImages();
} else {
}
}
//animate congarat starts here
var timeOut;
function animateCongrat() {
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
hideCongratAndBlueBody();
}
function addBlueBody() {
$("html").css("background-color", " #070755 ");
$('body').addClass('bodyblue')
$('#container').hide();
$('#2container').hide();
$('#3container').hide();
$('#2').hide();
$('.completed').hide();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$("html").css("background-color", "");
$('body').removeClass('bodyblue')
$('#container').show();
$('#2container').show();
$('#3container').show();
$('#2').show();
$('.completed').hide();
changemainbackground();
}, 5000);
}
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
.bodyblue {
background-image: url(https://via.placeholder.com/1000x600?text=Middle+bg);
height: 100vh;
width: 100vw;
}
ul {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.box {
width: calc(33.3% - 4px);
border-radius: 5px;
border: #000 border-color: #e6e600;
margin: -2px;
background-color: #99ffff;
height: 16vh;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.box002 {
position: absolute;
top: 30.3vh;
left: 50.98vw;
cursor: pointer;
border: 2px solid white;
}
.box002 img {
width: 15.0vw;
height: 15.0vh;
border-radius: 0%;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 29.0vw;
position: fixed;
top: 10.9vh;
left: 19.2vw;
}
body {
background-image: url(https://picsum.photos/200/300?image=0);
background-size: 100vw 100vh;
}
.reset img:hover {
opacity: 1
}
.hiddenimage {
position: absolute;
top: 4.3vh;
left: 50vw;
cursor: pointer;
}
.hiddenimage img {
width: 10.3vw;
height: 10.5vh;
border-radius: 15%;
}
.hand {
position: absolute;
top: 45.3vh;
left: 17vw;
cursor: pointer;
}
.hand img {
width: 25.3vw;
height: 25.5vh;
border-radius: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="main">
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>
<div class="congrats">
<div class="hiddenimage" style="display:none;">
<img src="" id="hiddenimageid" />
</div>
</div>
</body>

Second time values are not taken correctly from an array randomly in Javascript

I have four boxes I selected 4 items from an array items.
I have placed the randomly selected item inside 4 boxes.
Class box002 can be dragged and dropped to corresponding number in four boxes displayed. then digit in box dissappears.
My problem is that after dropping all four boxes correctly, second time values are not filled correctly, ie, reandomly selected values from array **items** does notmatch with **tempimages** stored for displaying in **box002** for dragging and dropping.
How to solve this? And make second level work?
var items = [{
label: '1',
url: 'https://via.placeholder.com/75x75?text=1'
},
{
label: '2',
url: 'https://via.placeholder.com/75x75?text=2'
},
{
label: '3',
url: 'https://via.placeholder.com/75x75?text=3'
},
{
label: '4',
url: 'https://via.placeholder.com/75x75?text=4'
},
{
label: '5',
url: 'https://via.placeholder.com/75x75?text=5'
},
{
label: '6',
url: 'https://via.placeholder.com/75x75?text=6'
},
{
label: '7',
url: 'https://via.placeholder.com/75x75?text=7'
},
{
label: '8',
url: 'https://via.placeholder.com/75x75?text=8'
},
{
label: '9',
url: 'https://via.placeholder.com/75x75?text=9'
},
{
label: '10',
url: 'https://via.placeholder.com/75x75?text=10'
}
];
var tempimages = [];
var array2 = [];
array2 = items.slice();
var backimgcount = 1;
var len = array2.length;
var item;
var displaycounter = 0;
var images = ['https://picsum.photos/200/300', 'https://picsum.photos/g/200/300'];
var index = 0;
function buildImage() {
document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}
function changeImage() {
index++;
if (index >= images.length) index = 0;
document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}
function rvalue() {
elements = document.getElementsByClassName("box");
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "#ff66ff";
//elements[i].borderRadius = "2px";
elements[i].style.border = "2px solid #e3a89e ";
//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
}
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
for (var index = 0; index < 4; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
//item = array2.splice(randomIndex, 1);
ptags[index].style.visibility = "visible";
ptags[index].textContent = item.label;
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
tempimages.push({
data: item,
index: randomIndex
});
ptags[index].dataset.itemIndex = randomIndex;
}
var tlen = tempimages.length;
}
function displayAllImages() {
if (tempimages.length == 0) {
rvalue();
}
//tempimages = tempimages.concat(tempimages.splice(0,2));
//item = tempimages.splice(0, 1);
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var arr = tempimages;
arr = shuffle(arr);
item = arr.shift();
image = document.getElementById('slide');
image.src = item.data.url;
image.dataset.itemIndex = item.index;
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id).classList.add('dashed');
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
if (x == y) {
//el.parentNode.removeChild;
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
//ev.currentTarget.removeChild(pParagraph);
pParagraph.style.visibility = "hidden";
item = this.item;
var arrayvalue = item.dataindex;
array2.splice(arrayvalue, 1);
//alert("sucessfull");
if (tempimages.length == 0) {
rvalue();
hiddenimage();
//changeImage();
changeImage();
}
displayAllImages();
} else {
playAudio2();
alert("WRONG TIME PLACED");
}
}
body {
overflow: hidden;
}
.box {
width: calc(33.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 0%;
background-color: #99ffff;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-size:contain;
}
.box002 {
position: absolute;
top: 27.3vh;
left: 72.98vw;
cursor: pointer;
}
.box002 img {
width: 14.0vw;
height: 23.0vh;
border-radius: 50%;
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
color: #005ce6;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="13">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>

I can't even imagine how are you work with this code. Before posting example on stackoverflow try to clear it (remove unused code, remove function that doesn't exists).
Issues:
1) drag function, .classlist was commented out
2) playAudio2 was commented out
3) hiddenimage function was commented out
4) ok, maybe index should be on p tag, but it's can be figured out from example (maybe you should add to boxtags too.
So, on this example you can see, that second time values working properly, but when all images are finished there is some new issues.
var items = [{
label: '1',
url: 'https://via.placeholder.com/75x75?text=1'
},
{
label: '2',
url: 'https://via.placeholder.com/75x75?text=2'
},
{
label: '3',
url: 'https://via.placeholder.com/75x75?text=3'
},
{
label: '4',
url: 'https://via.placeholder.com/75x75?text=4'
},
{
label: '5',
url: 'https://via.placeholder.com/75x75?text=5'
},
{
label: '6',
url: 'https://via.placeholder.com/75x75?text=6'
},
{
label: '7',
url: 'https://via.placeholder.com/75x75?text=7'
},
{
label: '8',
url: 'https://via.placeholder.com/75x75?text=8'
},
{
label: '9',
url: 'https://via.placeholder.com/75x75?text=9'
},
{
label: '10',
url: 'https://via.placeholder.com/75x75?text=10'
}
];
var tempimages = [];
var array2 = [];
array2 = items.slice();
var backimgcount = 1;
var len = array2.length;
var item;
var displaycounter = 0;
var images = ['https://picsum.photos/200/300', 'https://picsum.photos/g/200/300'];
var index = 0;
function buildImage() {
document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}
function changeImage() {
index++;
if (index >= images.length) index = 0;
document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}
function rvalue() {
elements = document.getElementsByClassName("box");
elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "#ff66ff";
//elements[i].borderRadius = "2px";
elements[i].style.border = "2px solid #e3a89e ";
//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
}
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
debugger;
for (var index = 0; index < 4; index++) {
randomIndex = Math.floor(Math.random() * array2.length)
item = array2[randomIndex];
//item = array2.splice(randomIndex, 1);
ptags[index].style.visibility = "visible";
ptags[index].textContent = item.label;
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
tempimages.push({
data: item,
index: randomIndex
});
ptags[index].dataset.itemIndex = randomIndex;
}
var tlen = tempimages.length;
}
function displayAllImages() {
if (tempimages.length == 0) {
rvalue();
}
//tempimages = tempimages.concat(tempimages.splice(0,2));
//item = tempimages.splice(0, 1);
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var arr = tempimages;
arr = shuffle(arr);
item = arr.shift();
image = document.getElementById('slide');
image.src = item.data.url;
image.dataset.itemIndex = item.index;
};
$(function() {
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);//.classList.add('dashed');
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
if (x == y) {
//el.parentNode.removeChild;
ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.border = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
//ev.currentTarget.removeChild(pParagraph);
pParagraph.style.visibility = "hidden";
item = this.item;
var arrayvalue = item.dataindex;
array2.splice(arrayvalue, 1);
//alert("sucessfull");
if (tempimages.length == 0) {
rvalue();
//hiddenimage();
//changeImage();
changeImage();
}
displayAllImages();
} else {
//playAudio2();
alert("WRONG TIME PLACED");
}
}
body {
overflow: hidden;
}
.box {
width: calc(33.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 0%;
background-color: #99ffff;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-size:contain;
}
.box002 {
position: absolute;
top: 27.3vh;
left: 72.98vw;
cursor: pointer;
}
.box002 img {
width: 14.0vw;
height: 23.0vh;
border-radius: 50%;
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
color: #005ce6;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="13">
<p name="values"></p>
</div>
</div>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>

load images from array to img tag inside class in javascript

I have two div boxes box1, box2, on dragging box2 to box1 , box1 get deleted and box2 element img get deleted.
I have a ArrayImage with 10 image value 1.jpg to 10.jpg. I have a arrayVariable with 10 image value 1.jpg to 10.jpg.
i have a temporary array named temparray which stores corresponding images of randomly selected values
I have a tempimages.push(${ptags[i].textContent}.jpg); which pushes correponding images to temparray.
I want to place the same image as selected random value i.e., if 3 and 8 is selected for box1 element 3.jpg and 8.jpg should be placed in img src of box2.
How to achieve it?
function rvalue() {
var array = [];
var tempimages = [];
var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];
arrayLength = arrayVariable.length;
ptags = document.getElementsByName("values");
for (i = 0; i < ptags.length; i++) {
ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
array.push(ptags[i].textContent);
tempimages.push(`${ptags[i].textContent}.jpg`); // want to display array to box002 to imgtag
}
console.log(array);
console.log(tempimages);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
el.parentNode.removeChild; // deleting drag item
ev.target.style.backgroundColor = 'initial'; //[value indicate which box element] bgcoclor none
/* Added */
var pParagraph = ev.target.firstElementChild;
console.log(pParagraph);
ev.target.removeChild(pParagraph);
alert(el);
}
.box1 {
background-color: coral;
width: 50px;
height: 50px;
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border-color: #e6e600;
margin: -2px;
border-radius: 10%;
background-color: #66ff66;
}
.box2 {
float: left;
width: 30px;
height: 30px;
background-color:#ffff00 2px;}
p {
font: "Courier New",
Courier,
monospace;
font-size: 20px;
color: #FFFFFF;
text-align: center;
}
<body onload="rvalue()">
<div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
<p name="values">name</p>
</div>
<div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
<p name="values">name2</p>
</div>
<div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
<p name="values">name3</p>
</div>
<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
</div>
</body>

This is not a super complete answer, no time at the moment to do a better job but this might give you someplace to start with, fixing a few issues, it does do the drop, just not super great.
var myapp = {};
function imgCreate(src, alt, title) {
var img = document.createElement('img');
img.src = src;
img.draggable = "true";
img.border = "rounded";
if (alt != null) img.alt = alt;
if (title != null) img.title = title;
img.class = "slide";
return img;
}
function rvalue() {
var array = [];
var tempimages = [];
var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];
arrayLength = arrayVariable.length;
ptags = document.getElementsByName("values");
for (i = 0; i < ptags.length; i++) {
let rv = Math.floor(Math.random() * arrayLength);
ptags[i].innerHTML = arrayVariable[rv];
array.push(ptags[i].textContent);
tempimages.push(ptags[i].textContent.jpg); // want to display array to box002 to imgtag
ptags[i].appendChild(imgCreate(ArrayOfImages[i], ArrayOfImages[i], ArrayOfImages[i] + " title"));
}
// console.log(array);
// console.log(tempimages);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
// var el = document.getElementById(data);
// el.parentNode.removeChild; // deleting drag item
console.log(data);
ev.target.style.backgroundColor = 'lightblue'; //[value indicate which box element] bgcoclor none
/* Added */
// var pParagraph = ev.target.firstElementChild;
// console.log(pParagraph);
// ev.target.removeChild(pParagraph);
// alert(el);
}
window.onload = function() {
// console.log("loading");
var ndbox = document.getElementsByClassName("box1");
var ndval = document.getElementsByName("p");
for (var i = 0; i < ndbox.length; i++) {
ndbox[i].addEventListener("dragover", allowDrop, true);
ndbox[i].addEventListener("drop", drop, true);
}
for (var i = 0; i < ndval.length; i++) {
ndval[i].addEventListener("dragover", allowDrop);
ndval[i].addEventListener("drop", allowDrop);
}
}
.box1 {
background-color: coral;
width: 100px;
height: 100px;
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border-color: #e6e600;
margin: -2px;
border-radius: 10%;
background-color: #66ff66;
}
.slide {
width: 100px;
height: 100px;
border-radius: 50%;
}
.box2 {
float: left;
width: 100px;
height: 100px;
float: left;
clear: both;
background-color: #ffff00;
margin-top: 2px;
}
p {
font: "Courier New", Courier, monospace;
font-size: 20px;
color: #FFFFFF;
text-align: center;
}
<body onload="rvalue()">
<div class="box1" id="10">
<p name="values">name</p>
</div>
<div class="box1" id="11">
<p name="values">name2</p>
</div>
<div class="box1" id="12">
<p name="values">name3</p>
</div>
<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
<img src="1.jpg" alt="1.jpg" draggable="true" class="slide" border="rounded" />
</div>
</body>