使用JavaScript，我如何检查来自用户的输入符合所有条件，然后显示输出？

Question

我做我的任务用于制作工具来检查用户输入的年份是否是闰年，进入今年有可能比1582年更大，我还是新的JavaScript和我希望得到一些反馈我有这么远。

注：为了使今年是闰年，它必须被4整除，除非它也是100，但不是400我的答案应该四舍五入到小数点后一位整除。例如：5.01为5.0

我试图获取输入年份，以满足所有这些条件，但我假设我没有这样做，以正确的格式，所以我正在寻找一些反馈什么，我可以编辑。提前致谢

<p> Enter a year later than 1582 and we will tell you if it is leap year </p>
<p> Enter your year: </p> <input type="text" id="box6"> <button id="checkyear"> Check Year </button>
<p> Leap year output will appear here: </p> <input type="text" id="box7" disabled style="width:15%;">

let year = document.getElementById("box6")
let yearOutput = document.getElementById("box7")

function leapyear() {
    var inputYear = parseInt(year.value);
    var outputYear = yearOutput;
    if (Number("inputyear") < Number("1582") {
        outputYear.value = inputyear + "is invalid.";
    }
    if (Number("inputYear") > Number("1582") && Number("inputYear") / 4 && 
    Number("inputYear") / 100 && Number("inputYear") / 400 {
        outputYear.value = inputYear + " is a leap year.";
    }
    else if (Number("inputYear") > Number("1582") && 
    Number("inputYear") % 4 !== 0 || Number("inputYear") % 100 !== 0 || Number("inputYear") % 400 !== 0 {
        outputYear.value = inputYear + " is not a leap year."
    }
    else {
        outputYear.value = "Please enter a year to see if it is a leap year or not.";
    }
}
document.getElementById("checkyear").onclick = leapyear;

Answer 1

尝试这个。这是清洁剂给我。

function leapyear(){
  let inputYear = parseInt(year.value);
  if(inputYear <= 1582){
    outputYear.value = `${inputYear} is invalid.`;
    return;
  }
  if(inputYear % 4 || (!(inputYear % 100) && inputYear % 400)){
    console.log("not leap year");
    outputYear.value = `${inputYear} is not a leap year.`;
    return;
  }
  console.log("leap year");
  outputYear.value = `${inputYear} is a leap year.`;
}

Answer 2

只需通过检查值开始时是一个数字，然后使用模函数。适合这个我觉得％给了我们一个余数。经典的用途是用于奇数/偶数[值]测试％2 === 0是偶数。

let year = document.getElementById("box6");
let yearOutput = document.getElementById("box7");

function leapyear() {
  // Grab our input an convert.
  let inputYear = parseInt(year.value);
  let outputYear = yearOutput;
  // If input year is invalid number OR less than or equal to 1582
  if (isNaN(inputYear) || inputYear <= 1582) {
      outputYear.value = ((isNaN(inputYear)) ? "input" : inputYear) + " is invalid.";
      return;
  }
  
  // lets see if it is a leap (divisible by 4 AND (not 400 and not divisible by 100))
  if(inputYear%4 === 0 && (inputYear === 400 || !inputYear%100 === 0)) {
    console.log("leap year");
    outputYear.value = inputYear + " is a leap year.";
  } else {
    console.log("not leap year");
    outputYear.value = inputYear + " is not a leap year."
  }
}
document.getElementById("checkyear").onclick = leapyear;

<p> Enter a year later than 1582 and we will tell you if it is leap year </p>
<p> Enter your year: </p> <input type="text" id="box6"> <button id="checkyear"> Check Year </button>
<p> Leap year output will appear here: </p> <input type="text" id="box7" disabled style="width:15%;">

Answer 3

让你的文本框为数字而不是文本，其只需要数字作为有效输入。

HTML代码：

  <p> Enter a year later than 1582 and we will tell you if it is leap year </p>
   <p> Enter your year: </p> <input type="number" id="box6"> <button id="checkyear"> Check Year </button>
  <p> Leap year output will appear here: </p> <input type="text" id="box7" disabled style="width:15%;">

JS代码：

 var year = document.getElementById("box6")
 var yearOutput = document.getElementById("box7")
 function checkLeap(){
     var ip = parseInt(year.value);
     if(isNAN(ip) || ip <= 1582){
       yearOutput.value = `${ip} is invalid.`;
      return;
     }
     if(ip % 4 || (!(ip % 100) && ip % 400)){
       yearOutput.value = `${ip} is not a leap year.`;
       return;
     }
    yearOutput.value = `${ip} is a leap year.`;
  }