dimanche 6 septembre 2020

How to move images from one div to another when checkbox is checked javascript

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>



Aucun commentaire:

Enregistrer un commentaire