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。您在初次加载页面时计算它，因此它不会将用户输入到表单字段。所以所有代码都需要在函数内部：

＆＃13;

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;