how do i increment a variable in jquery by 10 instead of 1?

March 26, 2024

I try to build a game with my draggables, so if i drop my draggable images in the right dropzone then 10 points get added to divResult otherwise 5 points gets subtracted.

This is what I tried:

$(document).ready(() => {
  $('.dragme').draggable();
  $('.dropzone').droppable({
    accept: '.dragme',
    drop: function(event, ui) {
      if (ui.draggable.data('id') === $(this).data('accept')) {
        for (let i = 0; i < 10; i += 10) {
          $('#divResult').html('het aantal punten is: ' + i)
        }
      } else {
        let aftrek = 5
        $('#divResult').html('Jammer, aantal punten aftrek is: ' + i -
          aftrek)
      }
    }
  })
})

.dropzone {
  border: 1px solid red;
}

<div class="dragme tekst" data-id="1"><img src="https://picsum.photos/id/1/100" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="2"><img src="https://picsum.photos/id/2/100" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="3"><img src="https://picsum.photos/id/3/100" alt="" width="100px" height="100px"></div>
<div class="dropzone" data-accept="1"><img src="https://picsum.photos/id/1/150" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="2"><img src="https://picsum.photos/id/2/150" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="3"><img src="https://picsum.photos/id/3/150" alt="" width="150px" height="150px"></div>
<br clear="all" />
<div id="divResult"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js">
</script>

>Solution :

I am guessing you want something like this?

$(document).ready(() => {
  let i = 0; // initialize variable with 0 points
  $('.dragme').draggable();
  $('.dropzone').droppable({
    accept: '.dragme',
    drop: function(event, ui) {
      if (ui.draggable.data('id') === $(this).data('accept')) {
        i += 10; // add ten points
        $('#divResult').html('het aantal punten is: ' + i)
      } else {
        i -= 5; // subtract five points
        $('#divResult').html('Jammer, aantal punten aftrek is: ' + i)
      }
    }
  })
})

<div class="dragme tekst" data-id="1"><img src="kitten1.jpg" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="2"><img src="kitten2.jpg" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="3"><img src="kitten3.jpg" alt="" width="100px" height="100px"></div>
<div class="dropzone" data-accept="1"><img src="kitten1.jpg" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="2"><img src="kitten2.jpg" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="3"><img src="kitten3.jpg" alt="" width="150px" height="150px"></div>
<br clear="all" />
<div id="divResult"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js">
</script>