Кнопка ничего не делает?

Question

У меня есть эта небольшая форма, где вы должны ввести свой год рождения. После этого вы должны нажать кнопку, и она автоматически узнает, если вам больше 18 лет, через год рождения. Проблема в том, что когда вы нажимаете кнопку, ничего не происходит. Даже если оставить его пустым, он все равно ничего не делает, хотя код говорит, что он должен появиться с ошибкой.

Это мой код:

<div align="center">  

    <?php if(!isset($_COOKIE[ "usermobile"])) { ?>  

    <ul> 
    <li><a id="demo03" href="#modal-03">DEMO03 7</a> 
    </li> 
    </ul>  

    <!--DEMO03--> 
    <div id="modal-03" style="background-image:url(images/access.jpg); background-size:cover;"> 
    <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID--> 
    <div id="btn-close-modal" class="close-modal-03"> 
     <!--CLOSE MODAL--> 
    </div> 

    <div class="modal-content"> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <img src="images/logo.png" /> 
     <br /> 
     <br /> 
     <font color="#bfbaa8">Man skal være over 18 år, for at få adgang til denne side.<br /> 
       <font size="+4">Indtast dit fødselsår</font> 
     <br /> 
     <input maxlength="4" id="age_validation_input" size="33" align="middle" style="background-color: rgba(191, 186, 168, 0.8); border:none; height:90px; width:380px; color:#3d3b33; padding:15px; font-size:70px; font-weight:bold;" value="F.eks. 1963" onblur="onBlur(this);" 
     onfocus="onFocus(this);"> 
     </font> 
     <br /> 
     <input type="button" id="age_validation_btn" align="middle" style="background-color: rgba(99, 95, 82, 0.8); border:none; height:65px; width:410px; color:#c4bda4; font-size:40px; font-weight:bold;" value="OK her" /> 
     <br /> 
     <br /> 
     <font size="-1" color="#69665b">Ved at klikke "OK" giver du tilladelse til, at webstedet benytter cookies.</font> 
    </div> 
    </div> 

    <?php } ?>  

</div> 


<script> 
    $('#age_validation_btn').on('click', function() { 

    var age = parseInt($('#age_validation_input').val(), 10); 
    var currentYear = (new Date).getFullYear(); 
    var calculatedYear = currentYear - 123; 
    var oldage = age - calculatedYear; 

    if (age > currentYear) { 
     swal("Hov!", "Vi er ikke nået til det år endnu.", "error"); 
     return false; 
    } 

    if (oldage < 5) { 
     swal("Hov!", "Du skal indtaste et gyldigt fødselsår.", "error"); 
     return false; 
    } 

    if (isNaN(age) || age == 'F.eks. 1963') { 
     swal("Hov!", "Du skal indtaste dit fødselsår, for at få adgang til denne side.", "error"); 
     return false; //stop the validation here 
    } 

    if (new Date().getFullYear() - age >= 18) { 
     Cookies.set("usermobile", "ok", { 
     expires: 1 
     }); 
     $('#btn-close-modal').trigger('click'); 
    } else { 
     Cookies.remove("usermobile"); 
     location.href = 'noaccess.html'; 
    } 
    }); 
</script> 

<script> 
    document.getElementById('age_validation_input').addEventListener('keydown', function(e) { 
    var key = e.keyCode ? e.keyCode : e.which; 

    if (!([8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 || 
     (key == 65 && (e.ctrlKey || e.metaKey)) || 
     (key >= 35 && key <= 40) || 
     (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) || 
     (key >= 96 && key <= 105) 
    )) e.preventDefault(); 
    }); 
</script> 

<script src="js/jquery.min.js"></script> 
<script src="js/animatedModal.min.js"></script> 
<script> 
    //demo 03 
    $("#demo03").animatedModal({ 
    modalTarget: 'modal-03', 
    animatedIn: 'bounceInDown', 
    animatedOut: 'bounceOutUp', 
    color: '#434138', 
    // Callbacks 
    beforeOpen: function() { 
     console.log("The animation was called"); 
    }, 
    afterOpen: function() { 
     console.log("The animation is completed"); 
    }, 
    beforeClose: function() { 
     console.log("The animation was called"); 
    }, 
    afterClose: function() { 
     console.log("The animation is completed"); 
    } 
    }); 
</script> 
<script type="text/javascript"> 
    (function() { 
    var link = document.getElementById('demo03'); 
    link.click(); 
    })(); 
</script> 

Answer 1

Вам необходимо включить библиотеку JQuery, прежде чем использовать его. Также, если бы вы нажали F12, чтобы открыть консоль, где должна быть ошибка, сообщающая вам, что библиотека отсутствует.

Это должно работать:

<div align="center"> 


<?php 
if(!isset($_COOKIE["usermobile"])) { ?> 


    <ul> 
      <li><a id="demo03" href="#modal-03">DEMO03 7</a></li> 
     </ul> 




       <!--DEMO03--> 
     <div id="modal-03" style="background-image:url(images/access.jpg); background-size:cover;"> 
      <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID--> 
     <div id="btn-close-modal" class="close-modal-03"> 
       <!--CLOSE MODAL--> 
      </div> 

      <div class="modal-content"> 
      <br /><br /><br /><br /><br /><br /> 
      <img src="images/logo.png" /> 
      <br /><br /> 
       <font color="#bfbaa8">Man skal være over 18 år, for at få adgang til denne side.<br /> 
       <font size="+4">Indtast dit fødselsår</font><br /> 
       <input maxlength="4" id="age_validation_input" size="33" align="middle" style="background-color: rgba(191, 186, 168, 0.8); border:none; height:90px; width:380px; color:#3d3b33; padding:15px; font-size:70px; font-weight:bold;" value="F.eks. 1963" onblur="onBlur(this);" onfocus="onFocus(this);"></font> 
<br /> 
<input type="button" id="age_validation_btn" align="middle" style="background-color: rgba(99, 95, 82, 0.8); border:none; height:65px; width:410px; color:#c4bda4; font-size:40px; font-weight:bold;" value="OK her" /> 
<br /><br /> 
<font size="-1" color="#69665b">Ved at klikke "OK" giver du tilladelse til, at webstedet benytter cookies.</font> 
      </div> 
     </div> 



<?php } ?> 




</div> 




<script src="js/jquery.min.js"></script> 
<script src="js/animatedModal.min.js"></script> 
<script> 

    $('#age_validation_btn').on('click', function() { 

    var age = parseInt($('#age_validation_input').val(), 10); 
    var currentYear = (new Date).getFullYear(); 
    var calculatedYear = currentYear - 123; 
    var oldage = age - calculatedYear; 

    if(age > currentYear) { 
     swal("Hov!", "Vi er ikke nået til det år endnu.", "error"); 
     return false; 
    } 

    if(oldage < 5) { 
     swal("Hov!", "Du skal indtaste et gyldigt fødselsår.", "error"); 
     return false; 
    } 

    if(isNaN(age) || age == 'F.eks. 1963') { 
     swal("Hov!", "Du skal indtaste dit fødselsår, for at få adgang til denne side.", "error"); 
     return false;//stop the validation here 
    } 

    if (new Date().getFullYear() - age >= 18) { 
    Cookies.set("usermobile", "ok", { expires: 1 }); 
    $('#btn-close-modal').trigger('click'); 
    } else { 
    Cookies.remove("usermobile"); 
    location.href = 'noaccess.html'; 
    } 
}); 


    </script> 

    <script> 
    document.getElementById('age_validation_input').addEventListener('keydown', function(e) { 
    var key = e.keyCode ? e.keyCode : e.which; 

    if (!([8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 || 
     (key == 65 && (e.ctrlKey || e.metaKey )) || 
     (key >= 35 && key <= 40) || 
     (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) || 
     (key >= 96 && key <= 105) 
     )) e.preventDefault(); 
}); 
    </script> 

     <script> 


      //demo 03 
      $("#demo03").animatedModal({ 
       modalTarget:'modal-03', 
       animatedIn:'bounceInDown', 
       animatedOut:'bounceOutUp', 
       color:'#434138', 
       // Callbacks 
       beforeOpen: function() { 
        console.log("The animation was called"); 
       },   
       afterOpen: function() { 
        console.log("The animation is completed"); 
       }, 
       beforeClose: function() { 
        console.log("The animation was called"); 
       }, 
       afterClose: function() { 
        console.log("The animation is completed"); 
       } 
      }); 


     </script> 
     <script type="text/javascript"> 
      (function() { 
       var link = document.getElementById('demo03'); 
       link.click(); 
      })(); 
     </script> 

Answer 2

Загрузите файл Jquery перед всем вашим другим яваскриптом кода. В противном случае он попытается запустить ваш код перед загрузкой Jquery, и он потерпит неудачу.

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

$(document).ready(function(){ 
    // yourcode 
}