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 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>

storing values to two different arrays based on random index's differ in javascript

In the below code I have an array notes having nine jpg's on it, and an array items nine label and nine url's on it.
this code has three boxes It selected 3 items randomly from array items.
I have placed the randomly selected item's label inside 3 boxes, inside <P> tags, and corresponding image on background from array items
I have stored corresponding images of notes on randomIndex selection to array notes selected this is called to box002 img src
Class box002 can be dragged and dropped to the corresponding number in four boxes displayed. then blue digit and background in box disappear.
I have a working code now
My problem is that I want the (round box) box002 item should be same as the rectangular box digit, now drop is from left side box onwards
ie in USER POINT OF VIEW: if the (round box)box002 digit is 2 the drop(leftmost box) should be blue 2 number with background URL image2
how to change my code to make this happen.
var randomIndex;
var array2 = [];
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'
}
];
var notes = ['https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'
];
var tempimages = [];
var notesselected = [];
array2 = items.slice();
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
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 = item.label;
ptags[index].dataset.itemIndex = randomIndex;
tempimages.push({data: item,index: randomIndex
});
notesselected.push({data: notes[randomIndex],
index: randomIndex});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
console.log('Exception');
}
}
var tlen = tempimages.length;
}
function displayAllImages() {
try {
if (tempimages.length == 0) {
rvalue();
}
var arr2 = notesselected;
item = arr2.shift();
image = document.getElementById('slide');
//image.src = "images/"+item.data.url;
image.src = item.data;
image.dataset.itemIndex = item.index;
} 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 el = document.getElementById(data);
var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;
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;
var arrayvalue = item.dataindex;
tempimages.splice(arrayvalue, 1);
if (tempimages.length == 0)
{
rvalue();
}
displayAllImages();
}
else {
alert("WRONG PLACED");
}
}
body {
overflow: hidden;
}
.box {
width: calc(10.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: 10.3vh;
left: 40.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>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>

How to check if two itemIndex is same in javascript

I have a drag and drop code in which ROUNDBOX can be dragged and dropped to RECTANGULARBOX in which IMAGEnumber in rectangularbox is same as ROUNDBOXdigit.
I have taken the itemIndex of the dragged item to X
x=document.getElementById("slide").dataset.itemIndex;
and itemIndex of Imagenumber toY
y=tempimages[randomIndex].index;
I want to check a condition if(x==y) if only then it allows drop.
But im not able check the condition,
How to change my code to achieve this property? where is the mistake
var randomIndex;
var array2 = [];
var item;
var tempimages = [];
var notesselected = [];
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'}];
var notes = [
'https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'
];
array2 = items.slice();
notes2 = notes.slice();
boxtags = document.getElementsByClassName("box");
function rvalue()
{
for (var index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() *array2.length)
item = array2[randomIndex];
tempimages.push({data: item,index: randomIndex });
notesselected.push({data: notes2[randomIndex],index: randomIndex});
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
array2.splice(randomIndex, 1);
notes2.splice(randomIndex, 1);
}
}
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);
var x=document.getElementById("slide").dataset.itemIndex;
if(typeof tempimages[randomIndex] !== 'undefined')
{ var y = tempimages[randomIndex].index; }
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;
var arrayvalue = item.dataindex;
tempimages.splice(arrayvalue, 1);
if (tempimages.length == 0) {
rvalue();
}
displayAllImages();
}
}
function displayAllImages()
{
if (tempimages.length == 0)
{
rvalue();
}
var arr2=notesselected;
item = arr2.shift();
image = document.getElementById('slide');
image.src =item.data;
image.dataset.itemIndex = item.index;
}
$(function() {
displayAllImages();
});
.box {
width: calc(33.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
margin: -2px;
border-radius: 0%;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-size: contain;
}
.box002 {
position: absolute;
top: 25.3vh;
left: 40.98vw;
cursor: pointer;
}
.box002 img {
width: 14.0vw;
height: 23.0vh;
border-radius: 50%;
}
<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>
</div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" border="rounded" />
</div>