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，则可以通过设置为element来创建visibility:hidden。然后，您可以根据条件显示和隐藏。

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，你可以试试这个：

＆＃13;

$(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.");
    }
  });
  
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

JavaScript - 使用HREF创建按钮

3 个答案: