Javascript 如何使用HTML5将结果输入输出到DOM来增加月份_Javascript_Jquery_Html

Javascript 如何使用HTML5将结果输入输出到DOM来增加月份

javascript jquery html

Javascript 如何使用HTML5将结果输入输出到DOM来增加月份,javascript,jquery,html,Javascript,Jquery,Html,我需要帮助从HTML5日期输入中获取值，并使用该值从该日期值开始增加月数这一行失败：var result2=myDate2.addMonths（1）当我删除包含所有内容的函数时，它会将每个增量输出到控制台，但当我封装一个函数以便创建单击事件时，它会中断有人能帮我解决这个问题吗？我相信有一种更有效的方法可以做到这一点我还需要将记录的数据（即result1）输出到HTML Divs，替换文本“to Calculate” 提前谢谢 <DOCTYPE HTML> <html&g

我需要帮助从HTML5日期输入中获取值，并使用该值从该日期值开始增加月数

这一行失败：

var result2=myDate2.addMonths（1）
当我删除包含所有内容的函数时，它会将每个增量输出到控制台，但当我封装一个函数以便创建单击事件时，它会中断
有人能帮我解决这个问题吗？我相信有一种更有效的方法可以做到这一点
我还需要将记录的数据（即result1）输出到HTML Divs，替换文本“to Calculate”
提前谢谢
<DOCTYPE HTML>
<html>
<head>
<script>

    function calculateDate() {

    Date.isLeapYear = function (year) { 
        return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)); 
    };

    Date.getDaysInMonth = function (year, month) {
        return [31, (Date.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
    };

    Date.prototype.isLeapYear = function () { 
        return Date.isLeapYear(this.getFullYear()); 
    };

    Date.prototype.getDaysInMonth = function () { 
        return Date.getDaysInMonth(this.getFullYear(), this.getMonth());
    };

    Date.prototype.addMonths = function (value) {
        var n = this.getDate();
        this.setDate(1);
        this.setMonth(this.getMonth() + value);
        this.setDate(Math.min(n, this.getDaysInMonth()));
        return this;
    };


    var myDate = document.getElementById("intro-date").value;
    var result1 = myDate;
    console.log(result1);

    var myDate2 = result1;
    var result2 = myDate2.addMonths(1);
    console.log(result2);

    var myDate3 = result2;
    var result3 = myDate3.addMonths(1);
    console.log(result3);

    var myDate4 = result3;
    var result4 = myDate4.addMonths(1);
    console.log(result4);

    var myDate5 = result4;
    var result5 = myDate5.addMonths(1);
    console.log(result5);

    var myDate6 = result5;
    var result6 = myDate6.addMonths(1);
    console.log(result6);

    var myDate7 = result6;
    var result7 = myDate7.addMonths(1);
    console.log(result7);

    var myDate8 = result7;
    var result8 = myDate8.addMonths(1);
    console.log(result8);

    var myDate9 = result8;
    var result9 = myDate9.addMonths(1);
    console.log(result9);

    var myDate10 = result9;
    var result10 = myDate10.addMonths(1);
    console.log(result10);

    var myDate11 = result10;
    var result11 = myDate11.addMonths(1);
    console.log(result11);

    };
    </script>
</head>
<body>
<form name="GestationForm">
    <input type="date" id="intro-date">

    Value one: <div id="value-one">Calculated</div>
    <input type="submit" value="click" onclick="calculateDate()">
</form>
<div id="results">
<div id="month1">FIRST MONTH
    <div id="calculate1">To Calculate
    </div>
</div>
<div id="month2">SECOND MONTH
    <div id="calculate2">To Calculate
    </div>
</div>
<div id="month3">THIRD MONTH
    <div id="calculate3">To Calculate
    </div>
</div>
<div id="month4">FOURTH MONTH
        <div id="calculate4">To Calculate
    </div>
</div>
<div id="month5">FIFTH MONTH
        <div id="calculate5">To Calculate
    </div>
</div>
<div id="month6">SIXTH MONTH
            <div id="calculate6">To Calculate
    </div>
</div>
<div id="month7">SEVENTH MONTH
            <div id="calculate7">To Calculate
    </div>
</div>
<div id="month8">EIGHT MONTH
            <div id="calculate8">To Calculate
    </div>
</div>
<div id="month9">NINTH MONTH
            <div id="calculate9">To Calculate
    </div>
</div>
<div id="month10">TENTH MONTH
            <div id="calculate10">To Calculate
    </div>
</div>
<div id="month11">ELEVENTH MONTH
            <div id="calculate11">To Calculate
    </div>
</div>
</div>


函数calculateDate（）{
Date.isLeapYear=函数（年份）{
回报率（（（第%4年===0）和&（第%100年！==0））| |（第%400年===0））；
};
Date.getDaysInMonth=函数（年，月）{
报税表[31，（日期：年？29:28），31,30,31,30,31,31,31,31,30,30,31][月份]；
};
Date.prototype.isLeapYear=函数（）{
返回日期.isLeapYear（this.getFullYear（））；
};
Date.prototype.getDaysInMonth=函数（）{
返回日期.getDaysInMonth（this.getFullYear（），this.getMonth（））；
};
Date.prototype.addMonths=函数（值）{
var n=this.getDate（）；
这是设定日期（1）；
this.setMonth（this.getMonth（）+值）；
this.setDate（Math.min（n，this.getDaysInMonth（））；
归还这个；
};
var myDate=document.getElementById（“简介日期”）.value；
var result1=myDate；
console.log（result1）；
var myDate2=result1；
var result2=myDate2.addMonths（1）；
console.log（result2）；
var myDate3=result2；
var result3=myDate3.addMonths（1）；
console.log（result3）；
var myDate4=result3；
var result4=myDate4.addMonths（1）；
控制台日志（结果4）；
var myDate5=结果4；
var result5=myDate5.addMonths（1）；
控制台日志（result5）；
var myDate6=结果5；
var result6=myDate6.addMonths（1）；
控制台日志（result6）；
var myDate7=结果6；
var result7=myDate7.addMonths（1）；
控制台日志（结果7）；
var myDate8=结果7；
var result8=myDate8.addMonths（1）；
控制台日志（结果8）；
var myDate9=结果8；
var result9=myDate9.addMonths（1）；
控制台日志（结果9）；
var myDate10=结果9；
var result10=myDate10.addMonths（1）；
控制台日志（result10）；
var myDate11=result10；
var result11=myDate11.addMonths（1）；
控制台日志（result11）；
};
值一：计算
第一个月
算计
第二个月
算计
第三个月
算计
第四个月
算计
第五个月
算计
第六个月
算计
第七个月
算计
八个月
算计
第九个月
算计
第十个月
算计
十一月份
算计


您已经声明了一个addMonths
函数todate类。和。。变量myDate
是字符串而不是日期
因此，您需要将myDate
变量声明为Date
var myDate = new Date(document.getElementById("intro-date").value);

编辑：
您还需要将输入元素类型从submit

<input type="button" value="click" onclick="calculateDate()">



它失败了
-你能说得更具体一点吗？有一件事需要注意。。。所有myDate*
和result*
变量最终都将是完全相同的值，因为它们都引用相同的日期对象。我使用chrome inspector并在每个变量结果（x）处设置断点。它传递第一个var result1=myDate；我看到它将日期作为数据加载。但是，当我进入下一步，它到达var result2=myDate2.addMonths（1）时，进程停止，没有任何内容记录到控制台。Mystika的答案可能是适合您的，如果我删除周围的函数，只需单独记录到控制台，它会将所有值正确记录到控制台。非常感谢您的帮助。还有一个简单的问题。如何将值输出到DOM以替换“to Calculate”文本？我尝试了以下方法，但得到错误“不是函数”。var output1=document.getElementById（“calculate1”）.innerHTML（result2）@比利：是的，innerHTML
不是一个函数。这是一种财产。您可以使用innerHTML属性，如document.getElementById（“calculate1”）。innerHTML=result2