How to move images from one div to another when checkbox is checked javascript
Question
I was wondering how to move images from one div to another when checkbox is checked, using JavaScript. They all should be in div class="ekran" when checkbox is checked, but in the same time if you check another checkbox, the previous one is unchecked and the previous image should disappear. I have been trying to figure this one out but I can't seem to find any solution. SO, if you have some ideas...
window.addEventListener('load', start, false); function start() { var slike = document.getElementsByTagName('img'); var ekran = document.getElementsByClassName('ekran')[0]; document.body.addEventListener('click', menjaj, false); function menjaj(e) { var img = document.createElement('img'); img.src = slike.src; ekran.innerHTML = ''; ekran.appendChild(img); } }
<!DOCTYPE html> <html lang="sr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/skript.js"></script> </head> <body> <div class="omotac"> <div> <label><input type="checkbox" name="odabir"><img src="slike/leto1.jpg" alt="leto1"></label> <label><input type="checkbox" name="odabir"><img src="slike/leto2.jpg" alt="leto2"></label> <label><input type="checkbox" name="odabir"><img src="slike/leto3.jpg" alt="leto3"></label> <label><input type="checkbox" name="odabir"><img src="slike/leto4.jpg" alt="leto4"></label> </div> <div class="ekran"></div> </div> </body> </html>
1 answers
solution1
-1 2020-09-07 00:02:54
You can use append the inner html by setting a target for the div you want the image to be copied to.
This is the line that does it
target.innerHTML += document.getElementById(checked).parentElement.innerHTML
Here is a working version from your code.
function myFunction(checked) { console.log ("checked is ", checked) // Get the checkbox var checkBox = document.getElementById(checked); var target = document.getElementById('target') // If the checkbox is checked, move the image if (checkBox.checked == true){ target.innerHTML += document.getElementById(checked).parentElement.innerHTML //remove one line below if you do not want to hide div from source checkBox.parentElement.innerHTML=''; } }
<!DOCTYPE html> <html lang="sr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/skript.js"></script> </head> <body> <div id="source" class="omotac"> <div> <label><input id="c1" onclick=myFunction("c1") type="checkbox" name="odabir"><img src="slike/leto1.jpg" alt="leto1"></label> <label><input id="c2" onclick=myFunction("c2") type="checkbox" name="odabir"><img src="slike/leto2.jpg" alt="leto2"></label> <label><input id="c3" onclick=myFunction("c3") type="checkbox" name="odabir"><img src="slike/leto3.jpg" alt="leto3"></label> <label><input id="c4" onclick=myFunction("c4") type="checkbox" name="odabir"><img src="slike/leto4.jpg" alt="leto4"></label> </div> <div class="ekran"> <h1>This is target div </h1> <div id="target"> </div> </div> </div> </body> </html>
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.