Javascript-需要帮助，将用户输入从表单转换为HTML

Question

好吧，所以我有点初学者，我试图将用户输入转换为一个程序，该程序根据输入来计算用户出生​​的日子。

html代码的要旨如下：

<h3>Please enter your date of birth in this format (MM/DD/YYYY)</h3>

        <form id = "dob-question">
          <input type="text" name="Date of Birth" id="dob-input" value="01/31/1986">
          </input>
          <button type="button" id="submit-button">Submit</button>
        </form>

        <div id="answer"></div>

和Javascript：

<script>
  function writesDay(d) {
    document.getElementById("answer").innerHTML = "You were born on a " + d;
  }

  var date = new Date();
  var dobInput = document.getElementById("dob-input").value;
  var splitDob = dobInput.split("/");

  var month = parseInt(splitDob[0] - 1);
  var day = parseInt(splitDob[1]);
  var year = parseInt(splitDob[2]);

  date.setFullYear(year, month, day);
  var dayOfWeek = "";

  switch(date.getDay()) {
    case 0: 
      dayOfWeek = "Sunday";
      break;
    case 1:
      dayOfWeek = "Monday";
      break;
    case 2: 
      dayOfWeek = "Tuesday";
      break;
    case 3:
      dayOfWeek = "Wednesday";
      break;
    case 4:
      dayOfWeek = "Thursday";
      break;
    case 5:
      dayOfWeek = "Friday";
      break;
    case 6:
      dayOfWeek = "Saturday";
      break;
  }

  document.getElementById("submit-button").addEventListener("click", writesDay(dayOfWeek));

</script>

我的第一个问题是：在单击“提交”按钮之前，代码已经运行了该函数，并从默认输入值（1986年1月31日）中写出了日期。 在单击“提交”按钮之前，我不希望出现这种情况。 我还希望它根据用户输入的内容进行更改，而现在不编写它。 实际上，“提交”按钮实际上没有任何作用，我也不知道为什么。 感谢帮助！

Answer 1

第一个问题是addEventListener第二个参数必须是一个函数。 您正在立即调用该函数，而不是传递对函数的引用。

document.getElementById("submit-button").addEventListener("click", function() {
    writesDay(dayOfWeek);
});

下一个问题是，当用户单击按钮时，您必须计算dayOfWeek 。 您是在页面最初加载时进行计算的，因此它不会使用户输入到表单字段。 因此，所有这些代码都必须位于该函数内：

 function writesDay(d) { document.getElementById("answer").innerHTML = "You were born on a " + d; } document.getElementById("submit-button").addEventListener("click", function() { var date = new Date(); var dobInput = document.getElementById("dob-input").value; var splitDob = dobInput.split("/"); var month = parseInt(splitDob[0] - 1); var day = parseInt(splitDob[1]); var year = parseInt(splitDob[2]); date.setFullYear(year, month, day); var dayOfWeek = ""; switch (date.getDay()) { case 0: dayOfWeek = "Sunday"; break; case 1: dayOfWeek = "Monday"; break; case 2: dayOfWeek = "Tuesday"; break; case 3: dayOfWeek = "Wednesday"; break; case 4: dayOfWeek = "Thursday"; break; case 5: dayOfWeek = "Friday"; break; case 6: dayOfWeek = "Saturday"; break; } writesDay(dayOfWeek); }); 

 <h3>Please enter your date of birth in this format (MM/DD/YYYY)</h3> <form id="dob-question"> <input type="text" name="Date of Birth" id="dob-input" value="01/31/1986"> </input> <button type="button" id="submit-button">Submit</button> </form> <div id="answer"></div> 

Answer 2

您需要在函数内移动代码，以便在加载时不调用它。 检查另一种简单的实现方式。

 <h3>Please enter your date of birth in this format (MM/DD/YYYY)</h3> <form id = "dob-question"> <input type="date" name="Date of Birth" id="dob-input" value="01/31/1986"> </input> <button type="button" id="submit-button">Submit</button> </form> <div id="answer"></div> <script> document.querySelector('#submit-button').addEventListener('click', function(){ let userInput = document.querySelector("#dob-input"), birthDate = new Date(userInput.value); document.querySelector('#answer').innerHTML = "You born on " + ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][birthDate.getUTCDay()]; }); </script> 

Answer 3

您仅将writesDay代码包装在一个函数中，其余代码将在加载后立即执行。 您还需要在单击按钮时执行获取日期等的代码。

 function writesDay(d) { document.getElementById("answer").innerHTML = "You were born on a " + d; } function getDayName(date) { var dayOfWeek = ""; switch(date.getDay()) { case 0: dayOfWeek = "Sunday"; break; case 1: dayOfWeek = "Monday"; break; case 2: dayOfWeek = "Tuesday"; break; case 3: dayOfWeek = "Wednesday"; break; case 4: dayOfWeek = "Thursday"; break; case 5: dayOfWeek = "Friday"; break; case 6: dayOfWeek = "Saturday"; break; } return dayOfWeek; } function getDateFromArray(splitDob) { var date = new Date(); var month = parseInt(splitDob[0] - 1); var day = parseInt(splitDob[1]); var year = parseInt(splitDob[2]); date.setFullYear(year, month, day); return date; } function getSplitDob() { var dobInput = document.getElementById("dob-input").value; var splitDob = dobInput.split("/"); return splitDob; } function updateDay() { var splitDob = getSplitDob(); var date = getDateFromArray(splitDob); var day = getDayName(date); writesDay(day); } document.getElementById("submit-button").addEventListener("click", updateDay); 

 <form id = "dob-question"> <input type="text" name="Date of Birth" id="dob-input" value="01/31/1986"> </input> <button type="button" id="submit-button">Submit</button> </form> <div id="answer"></div>