I'm working on an HTML/Javascript thingy. It shows a zoo, and you need to drag&drop the right animals(div) in the right cages(div). When you do, it should update the total number of animals in the zoo (it does with this code), and also update whatever amount of animal you just dropped. How can I do this?
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Zoo</title>
<link href="css/dierentuin.css" rel="stylesheet" type="text/css" />
<!-- jquery & jquery ui -->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- own js -->
<script src="js/dierentuin.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>DE DIERENTUIN</h1>
</div>
<div id="teller">
<table>
<tr>
<td>Totaal aantal dieren:</td>
<td id="totaal">0</td>
</tr>
<tr>
<td>aantal giraffen:</td>
<td id="aantal_giraffe">0</td>
</tr>
<tr>
<td>aantal leeuwen:</td>
<td id="aantal_leeuw">0</td>
</tr>
<tr>
<td>aantal apen:</td>
<td id="aantal_aap">0</td>
</tr>
<tr>
<td>aantal pinguins:</td>
<td id="aantal_pinguin">0</td>
</tr>
<tr>
<td>aantal slangen:</td>
<td id="aantal_slang">0</td>
</tr>
</table>
</div>
<div id="zoo">
<div class="verplaats" id="dieren">
<img class="drag" id="giraffe" src="afb/giraffe.png" />
<img class="drag" id="leeuw" src="afb/lion.png" />
<img class="drag" id="aap" src="afb/monkey.png" />
<img class="drag" id="pinguin" src="afb/pinguin.png" />
<img class="drag" id="slang" src="afb/snake.png" />
</div>
<div class="zetneer" id="tuin">
<div class="drop" id="drop_leeuw"></div>
<div class="drop" id="drop_giraffe"></div>
<div class="drop" id="drop_aap"></div>
<div class="drop" id="drop_pinguin"></div>
<div class="drop" id="drop_slang"></div>
</div>
</div>
</div>
</body>
</html>
The Javascript:
let aantalDieren = {
giraffe: 0,
leeuw: 0,
aap: 0,
pinguin: 0,
slang: 0,
};
$(document).ready(function() {
// Make animals draggable
$(".drag").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
})
// Make animals droppable
$(".drop").droppable({
tolerance: "pointer",
drop: function(event, ui) {
var dropId = $(this).attr('id');
var dragId = ui.draggable.attr("id");
var id = ui.draggable.attr("id");
// check is animal was put in the right cage
if (dropId === 'drop_' + dragId) {
// if so, show it in sidebar
aantalDieren[dragId]++;
document.getElementById("totaal").innerHTML++;
}
// if not, show an alert.
else {
alert("De " + id + " hoort hier niet.");
}
}
});
});
Link to the pen, if you'd like to get a better view.
You can increase the number in
#aantal_*elements the same way you increase the number in#totaal: