Im kind of doing a schedule which will give me total hours I've worked on my last two weeks in js, but the thing is that it won't access the rest of the inputs and I just don't know why.
my 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>
I do get this error at some point but since it's my first time using moment.js I quite don't know how to handle it...
TypeError: H(...) is null
it points to this line on my function
var start = moment.utc(startTime, "HH:mm");
heres the code
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');
}
}
Problem is that you are not passing correct time i.e. startTime and endTime to moment.utc() function due to which you are getting that error. Problem is at below lines to get correct values.
var startTime = document.getElementsByTagName('input')[i].value;
var endTime = document.getElementsByTagName('input')[(i+7)].value;
Alternative Solution:
Instead of above way to get values from input you should get values by id names to make sure you are getting correct values. you can do something like below:
var startTime = document.getElementById('#startTime').value;
var endTime = document.getElementsByTagName('#endTime').value;
If you will pass correct time to moment.utc() it will work. Below is working example:
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>