Javascript | Counting total and individual scores when dropping div onto other div

Question

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.

I recommend creating a [pen](https://codepen.io/) so we can try this out, with proper styling and images (or boxes instead of images). Which part exactly isn't working? — silvenon, Sep 27 '20 at 14:27
@silvenon Thanks for commenting. I created the pen (https://codepen.io/SirZeno/pen/yLOrBQz). The top images can be dragged and dropped into their respective cage divs, and also in those of the other animals with pictures. If it's the wrong cage, a message shows up. If it's the correct cage, the total amount **and also** the amount of the dragged animal should up by 1 (in the sidebar). — , Sep 27 '20 at 15:32

score 1 · Accepted Answer · answered Sep 27 '20 at 19:31

1

You can increase the number in #aantal_* elements the same way you increase the number in #totaal:

document.getElementById("aantal_" + dragId).innerHTML++;

answered Sep 27 '20 at 19:31

silvenon

2,068
15
29

Javascript | Counting total and individual scores when dropping div onto other div

1 Answers1