背景 - 使用javascript从数组中设置类的图像失败

Question

I have four boxes I selected 4 items from an array items

I have placed the randomly selected item inside 4 boxes.

i want the image corresponding to the random index from array items to be backgroundImage of each box, ie if 2 is in the first box then URL corresponding to 2 should be the background image of the first box

For I use :

boxtags[index].style.backgroundImage = 'url(' + item[0].url + ')'; 

inside rvalue();

but when applying the above code the boxes are not filled with values.

where is the error with the code ? how to correct it?

 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]; ptags[index].style.visibility = "visible"; ptags[index].textContent = item.label; //boxtags[index].style.backgroundImage = 'url(' + item[0].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; } .box002 { position: absolute; top: 27.3vh; left: 72.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } .reset { position: absolute; top: 87.8vh; left: 73.3vw; cursor: pointer; } .reset img { width: 5.3vw; height: 11.1vh; border-radius: 50%; } .quit { position: absolute; top: 88.3vh; left: 84.3vw; cursor: pointer; } .quit img { width: 4.3vw; height: 9.5vh; border-radius: 50%; } #timer { font-family: 'Sigmar One', cursive; margin-top: -20%; margin-left: 120%; } #heading { font-family: 'Sigmar One', cursive; color: #F534BB; } #container { white-space: nowrap; border: px solid #CC0000; } .containerr { border: px solid #FF3399; } .pic { background-size: 100% 100%; } .container2 { width: 35.1vw; position: fixed; top: 43.5vh; left: 13.5vw; } .box p { font-size: calc(2vw + 10px); } 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; } .text { padding: 20px; margin: 7 px; margin-top: 10px; color: white; font-weight: bold; text-align: center; } body { background-size: 100vw 100vh; } .next { margin-right: 50%; margin-left: 50%; margin-bottom: 10%; float: right; } ul { -moz-border-radius: 50%; -webkit-border-radius: 50%; } .reset img:hover { opacity: 1 } #hiddenimagewas { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; text-align: center; width: 100%; position: absolute; top: 8.5vh; left: 0.3vw; } .hiddenimage { position: absolute; top: 15.3vh; left: 10vw; cursor: pointer; } .hiddenimage img { width: 35.3vw; height: 45.5vh; border-radius: 15%; } #timetaken2 { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; text-align: center; width: 100%; position: absolute; top: 60.5vh; left: -12.8vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="congrats"> <!----<h1 style="color:#FC6B67; font-size:24px;" id="hiddenimagewas">Hidden image was</h1>------> </div> </div> <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> 

Answer 1

The main problem comes from the way you get the url from the literal object item .

You are tying to get the url by index item[0].url when the item variable isn't an array but an object literal so you must get the value by key directly using item.url instead like :

boxtags[index].style.backgroundImage = 'url(' + item.url + ')';

 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]; 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; } .box002 { position: absolute; top: 27.3vh; left: 72.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } .reset { position: absolute; top: 87.8vh; left: 73.3vw; cursor: pointer; } .reset img { width: 5.3vw; height: 11.1vh; border-radius: 50%; } .quit { position: absolute; top: 88.3vh; left: 84.3vw; cursor: pointer; } .quit img { width: 4.3vw; height: 9.5vh; border-radius: 50%; } #timer { font-family: 'Sigmar One', cursive; margin-top: -20%; margin-left: 120%; } #heading { font-family: 'Sigmar One', cursive; color: #F534BB; } #container { white-space: nowrap; border: px solid #CC0000; } .containerr { border: px solid #FF3399; } .pic { background-size: 100% 100%; } .container2 { width: 35.1vw; position: fixed; top: 43.5vh; left: 13.5vw; } .box p { font-size: calc(2vw + 10px); } 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; } .text { padding: 20px; margin: 7 px; margin-top: 10px; color: white; font-weight: bold; text-align: center; } body { background-size: 100vw 100vh; } .next { margin-right: 50%; margin-left: 50%; margin-bottom: 10%; float: right; } ul { -moz-border-radius: 50%; -webkit-border-radius: 50%; } .reset img:hover { opacity: 1 } #hiddenimagewas { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; text-align: center; width: 100%; position: absolute; top: 8.5vh; left: 0.3vw; } .hiddenimage { position: absolute; top: 15.3vh; left: 10vw; cursor: pointer; } .hiddenimage img { width: 35.3vw; height: 45.5vh; border-radius: 15%; } #timetaken2 { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; text-align: center; width: 100%; position: absolute; top: 60.5vh; left: -12.8vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="congrats"> <!----<h1 style="color:#FC6B67; font-size:24px;" id="hiddenimagewas">Hidden image was</h1>------> </div> </div> <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> 

Answer 2

The problem is that you assign value to item with item = array2[randomIndex] which is an object with 2 key-value pairs. not an array. So when you give background image to your box with boxtags[index].style.backgroundImage = 'url(' + item[0].url + ')'; , item[0] will return undefined. ( This is clear when you look into the dev console )

You should use just item.url instead.

 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]; 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%; } 

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

Answer 3

Below will change the background image for the box elements.

Note: The id's for the box elements should be in line with the object containing the URL's.

 const 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' } ]; // Put all boxes in an array const boxes = [...document.getElementsByClassName("box")]; // Set background image for each box boxes.map(box => { // Retrieve the id from the box element const id = box.id; // Use destructuring to pick the correct URL const { url } = items[id]; box.style.backgroundImage = "url(" + url + ")"; box.style.backgroundRepeat = "no-repeat"; box.style.backgroundSize = "contain"; }); 

 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; } .box002 { position: absolute; top: 27.3vh; left: 72.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } .reset { position: absolute; top: 87.8vh; left: 73.3vw; cursor: pointer; } .reset img { width: 5.3vw; height: 11.1vh; border-radius: 50%; } .quit { position: absolute; top: 88.3vh; left: 84.3vw; cursor: pointer; } .quit img { width: 4.3vw; height: 9.5vh; border-radius: 50%; } #timer { font-family: 'Sigmar One', cursive; margin-top: -20%; margin-left: 120%; } #heading { font-family: 'Sigmar One', cursive; color: #F534BB; } #container { white-space: nowrap; border: px solid #CC0000; } .containerr { border: px solid #FF3399; } .pic { background-size: 100% 100%; } .container2 { width: 35.1vw; position: fixed; top: 43.5vh; left: 13.5vw; } .box p { font-size: calc(2vw + 10px); } 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; } .text { padding: 20px; margin: 7 px; margin-top: 10px; color: white; font-weight: bold; text-align: center; } body { background-size: 100vw 100vh; } .next { margin-right: 50%; margin-left: 50%; margin-bottom: 10%; float: right; } ul { -moz-border-radius: 50%; -webkit-border-radius: 50%; } .reset img:hover { opacity: 1 } #hiddenimagewas { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; text-align: center; width: 100%; position: absolute; top: 8.5vh; left: 0.3vw; } .hiddenimage { position: absolute; top: 15.3vh; left: 10vw; cursor: pointer; } .hiddenimage img { width: 35.3vw; height: 45.5vh; border-radius: 15%; } #timetaken2 { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; text-align: center; width: 100%; position: absolute; top: 60.5vh; left: -12.8vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="congrats"> <!----<h1 style="color:#FC6B67; font-size:24px;" id="hiddenimagewas">Hidden image was</h1>------> </div> </div> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="0"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="1"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="3"> <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>