根据用户年龄更改单选按钮值的问题

Question

我正在尝试开发一些JS，以允许表单根据用户年龄更改提交的单选按钮的值。 本质上，如果用户为13岁或更小且选择的radio1值为'100'，则应将'100'更改为空白。

下面是代码。 无论我做什么，似乎总是会看到用户已超过13岁。感谢您的帮助！

var ofAge = "N"

function checkAge() {
  var monInput = document.querySelector("#i_date_of_birth_month").value
  var dayInput = document.querySelector("#i_date_of_birth_day").value
  var yearInput = document.querySelector("#i_date_of_birth_year").value
  var dateString = monInput + ", " + dayInput + ", " + yearInput
  var birthDate = new Date(dateString);
  var todayDate = new Date()
  var age = todayDate.getFullYear() - birthDate.getFullYear();
  var m = birthDate.getMonth() - todayDate.getMonth()
  if (m < 0) {
    age--
  }
  if (age > 13) {
    ofAge = "Y"
  } else if (age == 13) {
      var d = birthDate.getDate() - todayDate.getDate()
      if (d >= 0) {
        ofAge = "Y"
      } else {
        ofAge = "N"
      }
    }
  if (ofAge == "N") {
    document.querySelector("#radio1").value = ""
  } else {
    document.querySelector("#radio1").value = "100"
  }
}

document.getElementById("i_date_of_birth_day").addEventListener("change", checkAge)
document.getElementById("i_date_of_birth_year").addEventListener("change", checkAge)
document.getElementById("i_date_of_birth_month").addEventListener("change", checkAge)

Answer 1

如果年龄小于13，则需要添加else语句。

} else { ofAge = "N"; }

 var ofAge = "N" function checkAge() { var monInput = document.querySelector("#i_date_of_birth_month").value var dayInput = document.querySelector("#i_date_of_birth_day").value var yearInput = document.querySelector("#i_date_of_birth_year").value var dateString = monInput + ", " + dayInput + ", " + yearInput var birthDate = new Date(dateString); var todayDate = new Date() var age = todayDate.getFullYear() - birthDate.getFullYear(); var m = birthDate.getMonth() - todayDate.getMonth() if (m < 0) { age-- } age = parseFloat(age); if (age > 13) { ofAge = "Y" } else if (age == 13) { var d = birthDate.getDate() - todayDate.getDate() if (d >= 0) { ofAge = "Y" } else { ofAge = "N" } } else { ofAge = "N"; } if (ofAge == "N") { document.querySelector("#radio1").value = "" } else { document.querySelector("#radio1").value = "100" } } document.getElementById("i_date_of_birth_day").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_year").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_month").addEventListener("change", checkAge) 

 <input type="text" name="" id="i_date_of_birth_day"> <input type="text" name="" id="i_date_of_birth_month"> <input type="text" name="" id="i_date_of_birth_year"> <input type="radio" name="" id="radio1"> <input type="radio" name="" id="radio2"> 

Answer 2

您创建的日期字符串（带有逗号）的格式不正确。 但是最好直接设置日期，月份和年份

  var monInput = document.querySelector("#i_date_of_birth_month").value
  var dayInput = document.querySelector("#i_date_of_birth_day").value
  var yearInput = document.querySelector("#i_date_of_birth_year").value

我相信这就是您的问题所在。

  var dateString = monInput + ", " + dayInput + ", " + yearInput

相反，您应该创建一个默认的Date（），并使用setFullYear，setMonth（警告：javascript中的月份基于0）和setDate

Answer 3

基于@ tech2017的答案 ，您还需要更改处理日期的方式。 在每个字段之间使用连字符（ - ）代替逗号和空格以构建日期对象。

请参阅下面的代码，以修改@ tech2017的答案以正确构建日期。 console.log()调用位于其中，因此您可以查看正在生成和更改的内容。

 var ofAge = "N" function checkAge() { var monInput = document.querySelector("#i_date_of_birth_month").value var dayInput = document.querySelector("#i_date_of_birth_day").value var yearInput = document.querySelector("#i_date_of_birth_year").value var dateString = monInput + "-" + dayInput + "-" + yearInput console.log("dateString: " + dateString); var birthDate = new Date(dateString); console.log("birthDate: " + birthDate); var todayDate = new Date() var age = todayDate.getFullYear() - birthDate.getFullYear(); var m = birthDate.getMonth() - todayDate.getMonth() if (m < 0) { age-- } age = parseFloat(age); if (age > 13) { ofAge = "Y" } else if (age == 13) { var d = birthDate.getDate() - todayDate.getDate() if (d >= 0) { ofAge = "Y" } else { ofAge = "N" } } else { ofAge = "N"; } if (ofAge == "N") { document.querySelector("#radio1").value = "" } else { document.querySelector("#radio1").value = "100" } console.log("radio1 value = " + document.querySelector("#radio1").value); } document.getElementById("i_date_of_birth_day").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_year").addEventListener("change", checkAge) document.getElementById("i_date_of_birth_month").addEventListener("change", checkAge) 

 <input type="text" name="" id="i_date_of_birth_day"> <input type="text" name="" id="i_date_of_birth_month"> <input type="text" name="" id="i_date_of_birth_year"> <input type="radio" name="" id="radio1"> <input type="radio" name="" id="radio2">