[英]Issue with Changing a radio button value based on a users age
我正在嘗試開發一些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)
如果年齡小於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">
您創建的日期字符串(帶有逗號)的格式不正確。 但是最好直接設置日期,月份和年份
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
基於@ 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">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.