Knopf tut nichts?

Question

Ich habe dieses kleine Formular, wo Sie Ihr Geburtsjahr eingeben sollten. Danach sollten Sie einen Knopf drücken, und es sollte automatisch herausfinden, ob Sie über 18 sind, durch Ihr Geburtsjahr. Das Problem ist, dass nichts passiert, wenn Sie den Knopf drücken. Auch wenn Sie es leer lassen, tut es immer noch nichts, obwohl der Code sagt, dass es mit einem Fehler kommen sollte.

Dies ist mein Code:

<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

Sie benötigen die JQuery-Bibliothek enthalten, bevor Sie es benutzen. Auch wenn Sie F12 gedrückt hätten, um die Konsole zu öffnen, wo es einen Fehler geben sollte, der Ihnen mitteilt, dass die Bibliothek fehlt.

Dies sollte funktionieren:

<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

Laden Sie Ihre Jquery-Datei, bevor alle anderen JavaScript-Code. Andernfalls versucht es, den Code auszuführen, bevor Jquery geladen wird, und es wird fehlschlagen.

finden Sie Ihr Selbst ein Dokument bereit Funktion zu setzen, um sicherzustellen, es wird nur ausgeführt, wenn die Seite vollständig wie folgt geladen:

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