在用户使用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）关于在日期中增加天数。 请签出将日期添加到JavaScript日期 。 现在，您正在尝试将10添加到从输入元素中提取的字符串值中，该输入值只是将字符串“ 10”连接到日期字符串的末尾。 您需要将其转换为日期对象，然后添加10天。 提供的链接中的代码示例对此进行了解释。