无法访问时间表的输入

Question

我正在做一个时间表，它会给出我过去两周在 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');
        }
    }

Answer 1

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

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

备选方案：

您应该通过 id 名称获取值，而不是上述从 input 获取值的方法，以确保您获得正确的值。您可以执行以下操作：

  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>

无法访问时间表的输入

can't acces inputs of a schedule

javascript

loops

for-loop

schedule

momentjs