How to link the function to the HTML button and textfield in JavaScript

Question

I am asked to create a web page that user inserts the age and get some message. If the user is under 21, send to disney.com. I do not know how to send. That is so far what I did. I am not sure the function is correct or not and the HTML button and textfield are not working if I insert the age and click.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>check is over 21 or not</title>
        <script>
        function CalAge(birthDateString) {
            var today = new Date();
            var birthDate = new Date(birthDateString);
            var age = today.getFullYear() - birthDate.getFullYear();
            var month = today.getMonth() - birthDate.getMonth();
            if (month < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }
            return age;
        }
        if(CalAge() >= 21) {
            alert("You are over 21!");
        } 
        if(CalAge() < 21) {
            alert("You are under 21!");
        }

        </script>

    </head>
    <body >
        <input type="text" name="age" size="30" onClick="Calage()" placeholder="Enter your age" />
        <br />
        <input type="button" onclick="CalAge()" value="SUBMIT Age">
        <input type="reset" onclick="CalAge()" value="Reset age">

</html>

Do you want to know how to redirect someone to a different website? — Aniket G, Feb 19 '19 at 04:51
Yes, I also want to know when I insert my date of birth, I can get the message if I am order than 21. If I am younger than 21, redirect to disney.com. But the HTML textfield and button do not work. Could you help me base on my code? — Josh Lin, Feb 19 '19 at 13:49

score 1 · Answer 1 · answered Feb 19 '19 at 16:47

If the user is entering their age (not their birthday) then there's no need to calculate age. You could do something like this:

const btnCalcAge = document.querySelector('#btn-calc-age');
const btnReset = document.querySelector('#btn-reset');
const txtAge = document.querySelector('#txt-age');
const MIN_AGE = 21;
btnCalcAge.addEventListener('click', function(e) {
  const age = parseInt(txtAge.value, 10);
  if (age < MIN_AGE) {
    window.location.href = 'http://www.disney.com';
    return;
  }
  console.log('Welcome adult!');
});
btnReset.addEventListener('click', function(e) {
  txtAge.value = "";
});

<input id="txt-age" type="text" name="age" size="30" placeholder="Enter your age" />
<br />
<input id="btn-calc-age" type="button" value="SUBMIT Age" />
<input id="btn-reset" type="reset" value="Reset age" />

score 0 · Answer 2 · answered Feb 19 '19 at 05:17

I believe you're looking for a redirect technique. This answer perfectly describes how to redirect to another link using JavaScript.
As mentioned in the answer above you could redirect using any of the two options mentioned below:

if(calAge() >= 21) {
    window.location.replace("http://www.disney.com");
}

You could use window.location.href as well to achieve the same thing. However, I would strongly recommend reading the answer mentioned above to get a clearer understanding of what is best for your case.

Mister Jojo · Accepted Answer · 2019-02-23T03:13:48.693

Here's some code to help you ...

const ageInput = document.querySelector('#age-input');
ageInput.valueAsDate = new Date(); 

document.querySelector('#Bt-Submit').onclick = function()
{
  let Age = new Date( new Date() - ageInput.valueAsDate ).getFullYear() - 1970;
  console.log(Age);
  if (  Age < 21 ) { document.location.href = "https://disney.com" }
}
document.querySelector('#Bt-Reset').onclick = function()
{
  ageInput.valueAsDate = new Date(); 
}

<label>birth date :
<input type="date" id="age-input" size="30"  />
</label>
<br />
<button id="Bt-Submit">SUBMIT Age</button>
<button id="Bt-Reset">Reset Age</button>

How to link the function to the HTML button and textfield in JavaScript

3 Answers3