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>