Counter in JQuery not working

Question

I want to set up a counter with 3 attempts. An alert box has to show the remaining attempts. When I test it, the script won't run.

Here's my code:

JQUERY

var counter = 3;
$(document).ready(function() {
    $(".nummer").click(function() {

        var nummer = $(this).text();

        $("#display").append(nummer);

        if ($("#display").text().length > 5) {
            controle();
        }
    });
});

function controle() {

    if ($("#display").text() == 1234) {
        alert("correct");
    } else {
        while (counter > 0) {
            alert(counter - 1 "pogingen");
        }
        alert("you failed");
    }
}

HTML

<div id="display"> </div>
<div id="toetsen">
    <ul>
        <li><a class="nummer" href="#" id="knop1">1</a></li>
        <li><a class="nummer" href="#" id="knop2">2</a></li>
        <li><a class="nummer" href="#" id="knop3">3</a></li>
    </ul>

Answer 1

• Your alert contains a syntax error. You should be concatenating the string value using +

  alert(counter - 1 + " pogingen");
  

• counter - 1 however, will always yield 2. At some point you need to actually set the value. Most readable would be counter = counter - 1, but the shortest is to decrement it by one just before the value is accessed in the alert, using --counter:

  alert(--counter + ' pogingen');
  

• In deciding whether to test the given value, you're checking $("#display").text().length > 5. If the correct answer is indeed 1234, you will never achieve this if you only test the value once its length is greater than 5.

• You are using a while. That will simply loop until the condition is false. In your case, since you're not decrementing the value, it will never be, and you have an infinite loop of alerts. If you introduce the decrement like above, all your guesses will be used up at once. You want to use if ... else rather than while, to only test for the current value of counter and then move on.

• Again, if the correct answer is indeed 1234, you can never achieve this, since there is no 4 button.

• At last, the only thing you ever do is to append to the value. After each guess, you will need to clear it to allow a new guess. Set $('#display').text(''); at a convenient point, such as after showing the alert.

---

var counter = 3, correctAnswer = '1234';
$(document).ready(function() {
  $(".nummer").click(function() {
    var nummer = $(this).text();
    $("#display").append(nummer);

    if ($("#display").text().length >= correctAnswer.length) {
       controle();
    }
  });
});

function controle() {
  if ($("#display").text() == correctAnswer) {
    alert("correct");
  } else {
    if(counter > 0) {
      alert(--counter + " pogingen");
    } else {
      alert("you failed");
    }
    $('#display').text('');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="display"></div>
<div id="toetsen">
    <ul>
        <li><a class="nummer" href="#" id="knop1">1</a></li>
        <li><a class="nummer" href="#" id="knop2">2</a></li>
        <li><a class="nummer" href="#" id="knop3">3</a></li>
        <li><a class="nummer" href="#" id="knop4">4</a></li>
    </ul>
</div>

Answer 2

Replace this :

alert(counter - 1 "pogingen");

With this :

alert((counter - 1)+"pogingen");
--counter;

Also make sure to indent your code properly so you don't get lost.

Answer 3

use the below code, in alert you missed the concat operator

function controle() {

    if ($("#display").text() == 1234) {
        alert("correct");
    } else {
        while (counter > 0) {
            alert((counter-1)+"pogingen");
            counter = counter-1; // decrement the value
        }
        alert("you failed");
    }
}