Javascript 使用momentjs和getElementsByClassName显示日期
我试图在outputDate类中使用momentJS漂亮地显示一个inputDate，但是我错过了一些使它在脚本本身中工作的东西 为了理解代码，我们的想法是为每个“文章”很好地显示output DIV中的日期，该日期取自input DIV。inputDate的数量与outputDate的数量相同Javascript 使用momentjs和getElementsByClassName显示日期,javascript,html,momentjs,Javascript,Html,Momentjs,我试图在outputDate类中使用momentJS漂亮地显示一个inputDate，但是我错过了一些使它在脚本本身中工作的东西 为了理解代码，我们的想法是为每个“文章”很好地显示output DIV中的日期，该日期取自input DIV。inputDate的数量与outputDate的数量相同 <html> <head> <meta charset="utf-8" /> <script src="moment-with-locales.js">&
<html>
<head>
<meta charset="utf-8" />
<script src="moment-with-locales.js"></script>
<style>
.inputDate {diplay: none;}
</style>
</head>
<body>
<article>
<header>
<p class="inputDate">2018-06-15 11:27:30</p>
<p class="outputDate"></p>
</header>
<div id="question"><p>1.Lorem ipsum dolor sit amet ?</p></div>
<div id="answer"><p>1.Amet sit dolor ipsum lorem.</p></div>
</article>
<article>
<header>
<p class="inputDate">2019-07-18 15:15:45</p>
<p class="outputDate"></p>
</header>
<div id="question"><p>2.Lorem ipsum dolor sit amet ?</p></div>
<div id="answer"><p>2.Amet sit dolor ipsum lorem.</p></div>
</article>
<article>
<header>
<p class="inputDate">2019-08-14 10:23:00</p>
<p class="outputDate"></p>
</header>
<div id="question"><p>3.Lorem ipsum dolor sit amet ?</p></div>
<div id="answer"><p>3.Amet sit dolor ipsum lorem.</p></div>
</article>
<script type="text/javascript">
(function()
{
// get the input date from inputDate class element
var inputDates = document.getElementsByClassName("inputDate").innerHTML;
for (var i = 0; i < inputDates.length; i++) {
// use moment() with input value and a string format pattern as arguments
var moDate[i] = moment(inputDates[i], "YYYY-MM-DD hh:mm:ss");
// display the parsed date in a outputDate class element
var outputDates = document.getElementsByClassName("outputDate");
for (var j = 0; j < inputDates.length; j++) {
// use moment() with input value and a string format pattern as arguments
outputDates[j].innerHTML = moDate[i].locale("fr").format("LLL");
}
}
}
)();
</script>
</body>
</html>
.inputDate{diplay:none；}
2018-06-15 11:27:30
1.Lorem ipsum dolor sit amet
1.Amet sit dolor ipsum lorem
2019-07-18 15:15:45
2.Lorem ipsum dolor sit amet
2.Amet sit dolor ipsum lorem
2019-08-14 10:23:00
3.Lorem ipsum dolor sit amet
3.Amet sit dolor ipsum lorem
（功能（）
{
//从inputDate类元素获取输入日期
var inputDates=document.getElementsByClassName（“inputDate”）.innerHTML；
对于（变量i=0；i就可以完成这项工作，请注意，我曾经在inputDates
数组中获取每个p.inputDate
的下一个p.outputDate
：
（函数（）{
//从inputDate类元素获取输入日期
const inputDates=document.getElementsByClassName（“inputDate”）；
for（设i=0；i
.inputDate{
迪普莱：无；
}
2018-06-15 11:27:30
1.Lorem ipsum dolor sit amet
1.Amet sit dolor ipsum lorem
2019-07-18 15:15:45
2.Lorem ipsum dolor sit amet
2.Amet sit dolor ipsum lorem
2019-08-14 10:23:00
3.Lorem ipsum dolor sit amet
3.Amet sit dolor ipsum lorem
修复了您的问题。检查全部工作状态
您的问题如下：
1） var inputDates=document.getElementsByClassName（“inputDate”）.innerHTML
这里您没有按计划获取项目数组，此代码行的结果未定义，这是“innerHTML”的原因。您需要获取循环中每个项目的innerHTML，如下所示：
var moDate = moment(inputDates[i].innerHTML, "YYYY-MM-DD hh:mm:ss");
2） var moDate[i]=时刻（输入日期[i]，“YYYY-MM-DD hh:MM:ss”）
您不需要moDate[i]
中的[i]
部分，因为您正在循环一个数组，并分别为每个数组项创建唯一的moDate
我还删除了内部循环，它只是多余的
现场演示：
（函数（）{
//从inputDate类元素获取输入日期
var inputDates=document.getElementsByClassName（“inputDate”）；
var outputDates=document.getElementsByClassName（“outputDate”）；
对于（变量i=0；i
2018-06-15 11:27:30
1.Lorem ipsum dolor sit amet
1.Amet sit dolor ipsum lorem
2019-07-18 15:15:45
2.Lorem ipsum dolor sit amet
2.Amet sit dolor ipsum lorem
2019-08-14 10:23:00
3.Lorem ipsum dolor sit amet
3.Amet sit dolor ipsum lorem
首先，你的身份证不是唯一的你好，本戈！您是否可以添加一个链接或文本到您遇到的确切错误？另外，请阅读我们的。是的：在我的原始代码中，似乎没有任何东西被Javascript解析，因此它让inputDate按原样显示（在测试期间使用ISO-8601扩展日期显示，没有显示：无）。您的两个回答都完美而简单，我喜欢您的解释，我做得太过分了！我喜欢“nextElementSibling”，所以我会保留它。再次感谢你们两位。