JQuery中的计数器不工作

Question

我想设置一个3次尝试的计数器。警告框必须显示剩余的尝试。当我测试它时，脚本将不会运行。

这里是我的代码：

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

替换此：

alert(counter - 1 "pogingen"); 

有了这个：

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

同时一定要缩进代码正确，这样你就不会迷路。

Answer 2

使用下面的代码，在警告你错过了毗连运算

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"); 
    } 
} 

Answer 3

• 你的警报包含语法错误。你应该使用串联+

  alert(counter - 1 + " pogingen"); 
  

• counter - 1然而，总是会产生2字符串值。在某些时候，您需要真正设置该值。最可读的将是counter = counter - 1，但最短是一个之前的值在警报访问递减它，使用--counter：

  alert(--counter + ' pogingen'); 
  

• 在决定是否尝试给定值，你检查$("#display").text().length > 5 。如果正确答案是确实1234，你将永远不会做到这一点，如果你只测试值一旦其长度大于5

• 您使用的是while。这只会循环，直到条件为假。在你的情况下，因为你不减少价值，它永远不会，并且你有一个无限循环的警报。如果你像上面介绍的那样减少，所有的猜测都会一次性用完。您希望使用if ... else而不是while，以仅测试当前的值counter，然后继续。

• 再说一次，如果正确的答案确实是1234，您永远无法达到此目的，因为没有4按钮。

• 最后，你做的唯一的事情就是附加的值。每次猜测之后，您需要清除它以允许猜测。在方便的地方设置$('#display').text('');，例如显示警报之后。

---

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>