在Javascript中为用户输入的日期添加天数

Question

所以我在尝试用 Javascript 制作日期计算器时遇到了麻烦。我对 Javascript 还很陌生，所以我觉得我有点深入，但这里是我想要完成的工作的简要说明。

这是一个 jsfiddle：http://jsfiddle.net/b52hamw7/2/

我的 HTML 首先有一个格式如下的表单：

<form>
   <p class="instructions">I need my items by:</p><br>
   <input type="date" name="date" value="" id="date"/>
   <input type="button" value="Submit" id="submit">
</form>
<p>Be sure to order by:</p><p id="dateoutput"></p>

这里的想法是用户将日期输入到表单中，然后 javascript 代码将添加 10 天并输出他们需要订购的日期，格式为日期。

这是我到目前为止的脚本，我知道它还没有接近工作，但我想这是一个开始：

<script>
document.getElementsByName("submit").onclick = function() {
  var dateIn = document.getElementsById("date").value;
  var addDays = 10;
  var dateOut = dateIn + addDays; 
};

document.getElementById("dateoutput").innerHTML = dateOut;
</script>

我非常感谢您在这方面给我的任何指导。提前致谢！

Answer 1

您的代码中有多个拼写错误和问题。我将在下面列出其中一些，以帮助您走上正轨。

1) 您的document.getElementsByName("submit").onclick.... 行正在尝试搜索带有name="submit" 的元素，而您的HTML 中没有该元素。

2) 下一行var dateIn = document.getElementsById("date").value; 有错字，应该是：document.getElementById("date").value。你有一个额外的's'。

3) document.getElementsById("dateoutput").innerHTML = dateOut; 行有 3 个问题。首先，您有上面第 2 点中的额外“s”。其次，您试图将 innerHTML 分配给您失去作用域的变量的值。最后，它不在 click 函数的上下文中执行，而是在解析时立即执行，而不是在 click 事件发生时执行。因此，它需要在您的 onclick 处理函数中移动。

4) 关于向日期添加天数。请查看Add days to JavaScript Date。现在，您正尝试将 10 添加到您从输入元素中提取的字符串值，该输入元素只是将字符串 '10' 连接到日期字符串的末尾。您需要将其转换为日期对象，然后添加 10 天。这在提供的链接中的代码示例中进行了解释