Код Jquery для подтверждения кода

Question

Мне нужен этот код, чтобы проверить правильность ключа доступа или нет, а когда человек поместил неправильную клавишу более чем в 3 раза, он покажется истекшим или перейдет на другую страницу.

Я не знаю, что я делаю неправильно, так как я не могу закодировать ошибку, но все же без этого не работает, может кто-нибудь мне помочь?

$(document).ready(function(){ 
    var acc = 7829; 
    var AccessKey = $('#AccessKey').val(); 

    $("#accessBTN").click(function(){ 
     if(AccessKey == acc){ 

     $('#TokenVf').attr("style", "display:none"); 
     $('#infotf').text("Your access is granted to click continue to proceed to payment."); 
     $('#statustf').html("<font color='green'>Verified Access</font>"); 
     $("#TokenGO").toggle(1000); 

     } 
     else{ 
     $('#statustf').html("<font color='red'>Error</font>"); 
     $('#infotf').html("<font color='red'>Please correct your access code and try again</font>"); 
     $('#AccessKey').addClass('surname text error'); 
     } 
    }); 
}); 

Вот HTML

<div id="statustf"></div><br/> 

Answer 1

как это ..

$(document).ready(function() { 
 
    
 
    var check = 0; 
 

 
    $("#accessBTN").click(function() { 
 
    var acc = 7829; 
 
    var AccessKey = $('#AccessKey').val(); 
 
    //alert(AccessKey+acc) 
 
    if (AccessKey == acc && check < 3) { 
 

 
     $('#TokenVf').attr("style", "display:none"); 
 
     $('#infotf').text("Your access is granted to click continue to proceed to payment."); 
 
     $('#statustf').html("<font color='green'>Verified Access</font>"); 
 
     $("#TokenGO").toggle(1000); 
 

 
    } else { 
 
     $('#statustf').html("<font color='red'>Error</font>"); 
 
     $('#infotf').html("<font color='red'>Please correct your access code and try again</font>"); 
 
     $('#AccessKey').addClass('surname text error'); 
 
     check++ 
 
    } 
 
    if (check > 3) { 
 
     alert("'expired'") 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<input type="text" id="AccessKey" /> 
 
<button id="accessBTN">access</button> 
 
<div id="statustf"></div> 
 
<br/>

Answer 2

The var AccessKey = $('#AccessKey').val(); это выполняется сразу после загрузки страницы, а не при нажатии на кнопку. Поместите его внутри блока $("#accessBTN").click(function(){, чтобы он фактически проверял пароль каждый раз, когда нажатие кнопки запускается с кнопки доступа. В исходном коде значение входного проверялась только при загрузке страницы и не был обновлен позже ..

$(document).ready(function(){ 
    var acc = 7829;   

    $("#accessBTN").click(function(){ 
     var AccessKey = $('#AccessKey').val(); //<-- here 
     if(AccessKey == acc){ 

      $('#TokenVf').attr("style", "display:none"); 
      $('#infotf').text("Your access is granted to click continue to proceed to payment."); 
      $('#statustf').html("<font color='green'>Verified Access</font>"); 
      $("#TokenGO").toggle(1000); 

     } else { 
      $('#statustf').html("<font color='red'>Error</font>"); 
      $('#infotf').html("<font color='red'>Please correct your access code and try again</font>"); 
      $('#AccessKey').addClass('surname text error'); 
     } 
    }); 
});