Question

我被要求创建一个网页，用户可以输入年龄并获得一些消息。如果用户未满21岁，请发送至disney.com。我不知道如何发送。到目前为止，这是我所做的。我不确定该功能是否正确，如果插入年龄并单击，则HTML按钮和文本字段将无法正常工作。

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

Answer 1

如果用户输入年龄（而不是生日），则无需计算年龄。您可以执行以下操作：

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

Answer 2

我相信您正在寻找一种重定向技术。 This answer完美地描述了如何使用JavaScript重定向到另一个链接。
如以上答案中所述，您可以使用以下两个选项中的任何一个进行重定向：

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

您也可以使用window.location.href来实现相同的目的。但是，我强烈建议您阅读上面提到的答案，以更清楚地了解哪种方法最适合您的情况。

Answer 3

这里有一些代码可以帮助您...

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>

如何将功能链接到JavaScript中的HTML按钮和文本字段

3 个答案: