无法访问计划的输入

我在做一个时间表，它会给我最后两周在js中工作的总小时数，但问题是它无法访问其余的输入，我只是不知道为什么。

我的html

<!DOCTYPE html>
<html lang="fr-CA">
<head>
<title>hours</title>
<meta charset="utf-8">
<script src="js/fonctions.js"></script>
</head>
<form onsubmit="calculHoraire(event)">
<h2>1er horaire</h2>
<table class="horaire">
<tr>
<th>Journée</th>
<th>Dimanche</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
<th>Samedi</th>
</tr>
<tr>
<td>De</td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
</tr>
<tr>
<td>À</td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
</tr>
</table>
<h2>2ième horaire</h2>
<table class="horaire">
<tr>
<th>Journée</th>
<th>Dimanche</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
<th>Samedi</th>
</tr>
<tr>
<td>De</td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
</tr>
<tr>
<td>À</td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
<td><input type="time"></td>
</tr>
</table>
<button type="submit" tabindex="-1" style="float:right;margin-top:20px;margin-right:20px">Voir estimations</button>
<button type="reset"  tabindex="-1" style="float:right;margin-top:20px;margin-right:20px">Clear</button>
</form>
<button type="button" tabindex="-1" onclick="sauvegarde()">Sauvegarder cette page</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
</body>
</html>

我确实在某个时候遇到了这个错误，但由于这是我第一次使用moment.js，我不知道如何处理…

TypeError: H(...) is null

它指向我的函数上的这一行

var start = moment.utc(startTime, "HH:mm");

代码在这里

var hours = [];
function calculHoraire(event){
event.preventDefault();
for (var i = 0; i < 28; i++) {
if(document.getElementsByTagName('input')[i].value == ""){
document.getElementsByTagName('input')[i].value = "00:00";
document.getElementsByTagName('input')[(i+7)].value = "00:00";
}
if(i == 6){
i=14;
}
// parse time using 24-hour clock and use UTC to prevent DST issues
var startTime = document.getElementsByTagName('input')[i].value;
var endTime = document.getElementsByTagName('input')[(i+7)].value;
var start = moment.utc(startTime, "HH:mm");
var end = moment.utc(endTime, "HH:mm");
// account for crossing over to midnight the next day
if (end.isBefore(start)){
end.add(1, 'day');
}
// calculate the duration
var d = moment.duration(end.diff(start));
// subtract the lunch break if it's 5 hour or more...
if(parseInt((String(d)).charAt(0)) >= 5){
d.subtract(30, 'minutes');
}
hours[i] = moment.utc(+d).format('H:mm');
}
}

问题是您没有传递正确的时间，即startTime和endTime到moment.utc()函数，因此您会得到该错误。问题出现在以下几行，以获取正确的值。

var startTime = document.getElementsByTagName('input')[i].value;
var endTime = document.getElementsByTagName('input')[(i+7)].value;

替代解决方案：

和上述从input获取值的方法不同，您应该通过id名称获取值，以确保获得正确的值。你可以做如下操作：

var startTime = document.getElementById('#startTime').value;
var endTime = document.getElementsByTagName('#endTime').value;

如果您将正确的时间传递给moment.utc()，它将起作用。以下是工作示例：

var startTime = "23:00";
var start = moment.utc(startTime, "HH:mm");
console.log(start)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>

相关内容

最新更新

热门标签：