JavaScript - Create button with HREF

Question

I'm making an age checker just for fun and I'm having trouble with this. I want a code that creates following:

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

in a condition. If the age >= 13, create the button. This is what I have so far.

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>

Why don't you create it in HTML and make hiding it with `display: none`, then showing it when `age >= 13`? — Ammar Alyousfi, Nov 10 '17 at 05:57
use jQuery; much easy. use `.fadeIn()` `.fadeOut()` conditionally or `.show()` `.hide()` — wpcoder, Nov 10 '17 at 06:00
possible duplicate https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link — Vivek Kumar, Nov 10 '17 at 20:00

score 0 · Answer 1 · answered Nov 10 '17 at 06:08

0

Just simply add a button on html and show and hide it according to the age inserted by the user.

In JQuery:

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

answered Nov 10 '17 at 06:08

Chathura Alahakoon

106
3

score 0 · Answer 2 · answered Nov 10 '17 at 06:08

Better use jQuery, it is much more easier. But if you wanna use plain javascript, you can create an element by setting to visibility:hidden. Then, you can show and hide depending on condition.

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>

This is working, but it only changes the visibility and I can click it when it's invisible. Is there a way to remove/toggle the button similarly? — Maanush27, Nov 10 '17 at 21:08

score 0 · Answer 3 · answered Nov 10 '17 at 06:11

If you want to use jQuery, you may try this:

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

JavaScript - Create button with HREF

3 Answers3