javascript - 按钮什么都不做？

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>