Düğme hiçbir şey yapmıyor mu?

Question

Doğum yılınızda yazmanız gereken bu küçük formum var. Bundan sonra, bir düğmeye basmanız gerekir ve doğum yılınız üzerinden 18 yaşın üzerinde olup olmadığını otomatik olarak öğrenmelisiniz. Sorun şu ki, düğmeye bastığınızda hiçbir şey olmuyor. Onu boş bırakırsanız bile, kod bir hata ile gelmesi gerektiğini söylemesine rağmen hala hiçbir şey yapmaz.

<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

Sen bunu kullanmadan önce JQuery kütüphanesini eklemeniz gerekir. Ayrıca konsolu açmak için F12 tuşlarına basmış olsaydınız, kütüphanenin eksik olduğunu belirten bir hata olması gerekir.

Bu çalışması gerekir:

<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

diğer tüm javascript kodu önce jquery dosyasını yükleyin:

Bu benim kodudur. Aksi takdirde JQuery yüklenmeden önce kodunuzu çalıştırmayı dener ve başarısız olur.

Ayrıca sayfa tam böyle yüklendiğinde sadece çalışacağını emin olmak için kendine bir belge hazır fonksiyon koymak deneyin:

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