JavaScript - 使用 HREF 创建按钮

Question

我只是为了好玩而制作一个年龄检查器，但我遇到了麻烦。我想要一个创建以下内容的代码：

<form action="proceed.html">
    <input type="submit" value="Proceed" />
</form>

在某种条件下。如果年龄>= 13，请创建按钮。这就是我目前所拥有的。

function agechecker() {
  var uiage = document.getElementById("uiage").value;
  var uiageop = "";
  if (uiage > 0 && uiage < 115) {
    if (uiage >= 13) {
      uiageop = "You have successfully met/surpassed the age requirements!"
      <!--Add button here-->
    } else {
      uiageop = "You are too young to meet/surpass the age requirements."
    }
  } else {
    uiageop = "Please enter a valid age."
  }
  document.getElementById("ageverifyop").innerHTML = uiageop
}

<div class="agechecker">
  <h1>Check your age!</h1>
  <label>Your age: <input type="number" placeholder="Enter age" id="uiage"></label>
  <label><input type="submit" onclick="return agechecker()"></label>
  <h4 id="ageverifyop"></h4>
</div>

Answer 1

只需在html上添加一个按钮，并根据用户插入的年龄显示和隐藏它。

在 JQuery 中：

$("#yourButton").show();
$("#yourButton").hide();

Answer 2

更好地使用jQuery，它更容易。但是如果你想 使用普通javascript ，您可以通过设置为 visibility:hidden 来创建element。然后，您可以根据条件显示和隐藏。

function agechecker() {
  var uiage = document.getElementById("uiage").value;
  var uiageop = "";
  if (uiage > 0 && uiage < 115) {
    if (uiage >= 13) {
      uiageop = "You have successfully met/surpassed the age requirements!"
      <!--Add button here-->
      document.getElementById("proceed").style.visibility = "visible";
    } else {
      uiageop = "You are too young to meet/surpass the age requirements."
      document.getElementById("proceed").style.visibility = "hidden";
    }
  } else {
    uiageop = "Please enter a valid age."
    document.getElementById("proceed").style.visibility = "hidden";
  }
  document.getElementById("ageverifyop").innerHTML = uiageop
}

<div class="agechecker">
  <h1>Check your age!</h1>
  <label>Your age: <input type="number" placeholder="Enter age" id="uiage"></label>
  <label><input type="submit" onclick="return agechecker()"></label>
  <h4 id="ageverifyop"></h4>
  <div id="proceed" style="visibility: hidden">
      <form action="proceed.html">
        <input type="submit" value="Proceed" />
      </form>
  </div>
</div>

Answer 3

如果你想使用 jQuery，你可以试试这个：

$(document).ready(function(){
  
  $('#uiage').on('change input', function(){
    if($(this).val().length < 1){
      $("#ageverifyop").html("");
      //$('input[type="submit"]').css('display', 'none');
    }else if($(this).val() < 13){
      $('input[type="submit"]').css('display', 'none');
      $("#ageverifyop").html("You're too young.");
    } else if($(this).val() >= 13){
      $('input[type="submit"]').css('display', 'inline-block');
      $("#ageverifyop").html("Your age is valid.");
    }
  });
  
});

input[type="submit"]{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="agechecker">
  <h1>Check your age!</h1>
  <label>Your age: <input type="number" placeholder="Enter age" id="uiage"></label>
  <label><input type="submit"></label>
  <h4 id="ageverifyop"></h4>
</div>