Replace a div with an image using Javascript
Question
I'm trying to make a memory game in Javascript. For this purpose, I have 20 div 's spread across 5 rows, with 4 div 's in a row where each row is a div itself. Now, I want the contents of a particular div to be replaced with an image when I(the user) clicks on it. In the code shown below, I've tried to replace the contents with text, which doesn't seem to work. Only if the contents are replaced with text successfully, can I try with images.
const element1 = document.getElementById('element1'); const element2 = document.getElementById('element2'); const element3 = document.getElementById('element3'); const element4 = document.getElementById('element4'); const element5 = document.getElementById('element5'); const element6 = document.getElementById('element6'); const element7 = document.getElementById('element7'); const element8 = document.getElementById('element8'); const element9 = document.getElementById('element9'); const element10 = document.getElementById('element10'); const element11 = document.getElementById('element11'); const element12 = document.getElementById('element12'); const element13 = document.getElementById('element13'); const element14 = document.getElementById('element14'); const element15 = document.getElementById('element15'); const element16 = document.getElementById('element16'); const element17 = document.getElementById('element17'); const element18 = document.getElementById('element18'); const element19 = document.getElementById('element19'); const element20 = document.getElementById('element20'); element1.addEventListener('click',function() { element1.innerHTML = ""; var h1 = document.createElement('h1'); h1.innerHTML = "Hello world"; document.getElementById('main').appendChild(h1); // removing the element and then adding another element in its place }) element2.addEventListener('click',function() { element2.innerHTML = "Hello world"; // directly replacing the element })
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; }.heading{ margin: 15px; padding: 10px; }.heading h2{ text-align: center; font-family: 'Poppins', sans-serif; font-size: 30px; /* position: fixed; */ font-weight: bold; }.main-container{ display: flex; align-items: center; justify-content: center; margin-top: 10px; }.element{ width: 175px; height: 175px; background-color: indianred; margin: 20px; cursor: pointer; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Memory Game</title> <link rel="stylesheet" href="/memory-game/style.css"> </head> <body> <div class="heading"> <h2>MEMORY GAME</h2> </div> <div class="main-container" id="main"> <div class="row" id="row1"> <div class="element" id="element1"></div> <div class="element" id="element2"></div> <div class="element" id="element3"></div> <div class="element" id="element4"></div> <div class="element" id="element5"></div> </div> <div class="row"> <div class="element" id="element6"></div> <div class="element" id="element7"></div> <div class="element" id="element8"></div> <div class="element" id="element9"></div> <div class="element" id="element10"></div> </div> <div class="row"> <div class="element" id="element11"></div> <div class="element" id="element12"></div> <div class="element" id="element13"></div> <div class="element" id="element14"></div> <div class="element" id="element15"></div> </div> <div class="row"> <div class="element" id="element16"></div> <div class="element" id="element17"></div> <div class="element" id="element18"></div> <div class="element" id="element19"></div> <div class="element" id="element20"></div> </div> </div> <script src="/memory-game/script.js"></script> </body> </html>
Now I've tried 2 different methods to replace the content. Both have been mentioned in the Javascript code.
4 answers
solution1
1 2020-11-13 11:46:05
Don't you mean this?
I am delegating from the main container
document.getElementById("main").addEventListener('click', function(e) { const tgt = e.target; if (.tgt.classList;contains("element")) return. tgt.style:backgroundImage='url(https.//via.placeholder?com/130/0000FF/808080;text=Hello+world)'; })
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; }.heading { margin: 15px; padding: 10px; }.heading h2 { text-align: center; font-family: 'Poppins', sans-serif; font-size: 30px; /* position: fixed; */ font-weight: bold; }.main-container { display: flex; align-items: center; justify-content: center; margin-top: 10px; }.element { width: 175px; height: 175px; background-color: indianred; margin: 20px; cursor: pointer; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Memory Game</title> <link rel="stylesheet" href="/memory-game/style.css"> </head> <body> <div class="heading"> <h2>MEMORY GAME</h2> </div> <div class="main-container" id="main"> <div class="row" id="row1"> <div class="element" id="element1"></div> <div class="element" id="element2"></div> <div class="element" id="element3"></div> <div class="element" id="element4"></div> <div class="element" id="element5"></div> </div> <div class="row"> <div class="element" id="element6"></div> <div class="element" id="element7"></div> <div class="element" id="element8"></div> <div class="element" id="element9"></div> <div class="element" id="element10"></div> </div> <div class="row"> <div class="element" id="element11"></div> <div class="element" id="element12"></div> <div class="element" id="element13"></div> <div class="element" id="element14"></div> <div class="element" id="element15"></div> </div> <div class="row"> <div class="element" id="element16"></div> <div class="element" id="element17"></div> <div class="element" id="element18"></div> <div class="element" id="element19"></div> <div class="element" id="element20"></div> </div> </div> <script src="/memory-game/script.js"></script> </body> </html>
Alternative code
var h1 = document.createElement('h1');
h1.innerHTML = "Hello world";
tgt.appendChild(h1);
const img = new Image();
img.src="https://via.placeholder.com/130/0000FF/808080?text=Hello+world"
tgt.appendChild(img);
solution2
1 2020-11-13 12:05:31
You can also loop on the .element and use their id s to call an image to show onclick
basic hide/show example
let element = document.querySelectorAll('.element'); for (let i = 0; i < element.length; i++) { element[i].addEventListener("click", function() { if (element[i].innerHTML == "") { var img = document.createElement('img'); img.src= "http://dummyimage.com/175&text="+element[i].getAttribute('id'); element[i].appendChild(img); } else {element[i].innerHTML="";} }) }
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; }.heading { margin: 15px; padding: 10px; }.heading h2 { text-align: center; font-family: 'Poppins', sans-serif; font-size: 30px; /* position: fixed; */ font-weight: bold; }.main-container { display: flex; align-items: center; justify-content: center; margin-top: 10px; }.element { width: 175px; height: 175px; background-color: indianred; margin: 20px; cursor: pointer; }
<div class="heading"> <h2>MEMORY GAME</h2> </div> <div class="main-container" id="main"> <div class="row" id="row1"> <div class="element" id="element1"></div> <div class="element" id="element2"></div> <div class="element" id="element3"></div> <div class="element" id="element4"></div> <div class="element" id="element5"></div> </div> <div class="row"> <div class="element" id="element6"></div> <div class="element" id="element7"></div> <div class="element" id="element8"></div> <div class="element" id="element9"></div> <div class="element" id="element10"></div> </div> <div class="row"> <div class="element" id="element11"></div> <div class="element" id="element12"></div> <div class="element" id="element13"></div> <div class="element" id="element14"></div> <div class="element" id="element15"></div> </div> <div class="row"> <div class="element" id="element16"></div> <div class="element" id="element17"></div> <div class="element" id="element18"></div> <div class="element" id="element19"></div> <div class="element" id="element20"></div> </div> </div>
solution3
0 2020-11-13 11:42:00
You might set tag attributes using JavaScript, like you did with innerHTML :
var my_img = document.createElement("img");
my_img.src = "image.png";
(remember to replace image.png with what you actually needs)
solution4
-2 2020-11-13 11:44:43
Let be clear, you want to replace each block with hello world when clicked on it?
If it is what i thought it is then, you change innerHTML to innerText first (for this hello world atleast), then
element1.addEventListener('click',function() {
element1.innerText = "";
var h1 = document.createElement('h1');
h1.innerText = "Hello world";
document.getElementById('element1').appendChild(h1); // removing the element and then adding another element in its place
})
By using document.getElementById('main') you're referring to the whole document.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Replace images in a DIV using JavaScript
Replace image and text using javascript
Image is not showing in div using JavaScript
Place an image in div using Javascript
Using Javascript to replace an angular div with different elements
How to Replace and Hide Div Contents Using Javascript
Replace a div on a ajax call using javascript / Jquery
How to replace a div content with other div using jquery or Javascript?
Javascript - replace broken image by text (div; css class)
How to replace the white in an image using Javascript?
Related Tags