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