Javascript HTML如何根据另一个输入中的答案设置输入值的范围

在我的网络表单上，我有一个问题，询问出生日期和性别

我想用Javascript做一个检查，确保如果用户选择“男性”，他必须年满18岁，55岁以下。但如果他们选择“女性”，他们必须在20岁以上和50岁以下

（我的HTML示例）我有：

性别：

男性
女性



出生日期：

修改

HTMLElement

属性 基本上，您要查找的是，当您单击单选按钮时，它会触发一个函数，然后修改属性

min

，并更改日期

maleRadioButton.addEventListener('click', () => dateInput.setAttribute('min', new Date(new Date().setFullYear(new Date().getFullYear() - 18)).toLocaleDateString())

---

仅供参考，我真诚地希望，对不同性别使用不同年龄段的原因不是性别歧视。

由于没有任何有用的答案，我最终自己就是这么做的：

function checkGender() {
var test = document.getElementById("male").checked;
document.getElementById("demo").innerHTML = test;
if (test == true) {
    ageMin = 18;
    ageMax = 55;
} else {
    ageMin = 20;
    ageMax = 50;
}
//The following are only used to test that the values work
document.getElementById("demo1").innerHTML = ageMin;
document.getElementById("demo2").innerHTML = ageMax;

var dateString = document.getElementById("doB").value;
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth()- birthDate.getMonth();
document.getElementById("demo3").innerHTML = dateString;
document.getElementById("demo4").innerHTML = today;


if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
}
document.getElementById("demo5").innerHTML = age;

if (age<ageMin || age>ageMax) {
     alert("Age is outside limits, please try again.");
     stop();
}   
}

函数checkGender（）{
var测试=document.getElementById（“男性”）。选中；
document.getElementById（“demo”）.innerHTML=test；
如果（测试==真）{
ageMin=18；
最大值=55；
}否则{
ageMin=20；
最大值=50；
}
//以下仅用于测试这些值是否有效
document.getElementById（“demo1”）.innerHTML=ageMin；
document.getElementById（“demo2”）.innerHTML=ageMax；
var dateString=document.getElementById（“doB”）.value；
var today=新日期（）；
var birthDate=新日期（日期字符串）；
var age=today.getFullYear（）-birthDate.getFullYear（）；
var m=today.getMonth（）-birthDate.getMonth（）；
document.getElementById（“demo3”）.innerHTML=dateString；
document.getElementById（“demo4”）.innerHTML=today；
如果（m<0 | |（m==0&&today.getDate（）

HTML方面的事情：

<div class="form-row">
        <br>
    <legend class="col-form-label col-sm-1 col-sm-offset-1">Gender:</legend>
        <div class="col-sm-4">
            <div class="form-check">
                <input class="form-check-input" id="male" type="radio" 
  name="Gender" value="male" required checked name="gender">
                <label class="form-check-label" for="male">
                    Male
                </label>
            </div>
            <div class="form-check">        
                <input id="female" type="radio" name="Gender" value="female" required name="gender">
                <label class="form-check-label" for="female">
                    Female
                </label>
            </div>
        </div>
        <div class="col-sm-4">
            <label for="doB">Date of Birth:</label><br>
            <input id="doB" type="date" name="dob" required>
        </div>
    </div>

性别：
男性
女性
出生日期：

您的JavaScript代码在哪里？你现在有没有尝试实施什么？没有，我不知道从哪里开始！我试图学习如何使用javascript和HTML，但我不知道如何准确地编写代码并将其链接到HTML中。我可以用C++和Python代码编写，你是否已经使用了任何一种JavaScript教程来学习基础知识？它会告诉你所有关于放置代码的地方，当用户做出选择时将代码链接到事件，等等。听起来你好像没有研究过这些？在尝试任何更具体的方法之前，最好先了解基本原理。在尝试跑步之前先走路。我确实看过一些基本的Javascript视频和资源，比如w3schools。然而，它们都没有真正涵盖我要做的事情。我想我是想跳进海里学游泳！我可以想象其中的大部分内容包括在元素上设置事件处理程序、在事件发生时运行一些代码、检查当前存储在字段中的值以及向用户显示消息。也许不是全部，但肯定会在某个时候涵盖所有这些主题。当你一般性地描述你的需求时，它实际上是你在大多数教程中可以找到的所有基本内容，或者可以通过谷歌搜索其他现有的需求示例。你提到你是一个在其他语言方面经验丰富的程序员…所以你有能力发现一种新语言，自己尝试一些东西。嗨，绝对不是！我甚至考虑为性别问题添加一个“其他”选项，这样我就更具包容性了。我选择这些值只是为了简化问题，这个表单只是为了测试我使用javascript的能力，而不是为了任何真正的目的。