Невозможно l oop над строками таблицы, чтобы анимировать соответствующие индикаторы выполнения.

Question

Хорошо, ради краткости, я просто включаю сам код javascript. Если HTML или CSS действительно нужны, я обновлю сообщение.

Цель: у меня есть таблица со строками (отображение задач), и у меня есть индикатор выполнения для справа от каждого задания, показывающего, сколько времени прошло.

Проблема: работает только первый индикатор выполнения. Все последующие индикаторы выполнения просто показывают полностью заполненный индикатор. При просмотре журнала консоли программа вообще не зацикливается. Он не выполняет никаких вычислений ни для каких строк, кроме первой. Я пытался переместить различные переменные внутри и снаружи l oop, но без сигары.

Пожалуйста, прости меня, если код выглядит ужасно и / или ответ очевиден. По сути, это моя первая настоящая javascript 'программа.'

var Table = document.getElementsByTagName("table");
var Row = document.getElementsByTagName("tr");
var rowDisplay = document.getElementsByTagName("td");

function fillBar(timeElapsedPercent) {

    for (i = 0; i < rowDisplay.length; i++) {

        var eachRow = rowDisplay.item(i);
        const interval = setInterval(() => {

            // Grabbing the needed info from the cells
            var taskName = rowDisplay[0].innerText;
            var rawDeadline = rowDisplay[1].innerText;
            var rawStartTime = rowDisplay[2].innerText;

            var bar = document.querySelector('.bar');

            //calculations for the progress bar
            var now = new Date();
            var startTime = new Date(rawStartTime.replace(/(am|pm)/, ''));
            var deadline = new Date(rawDeadline.replace(/(am|pm)/, ''));
            var timeTotal = Math.abs(deadline - startTime);
            var timeTotalPercent = Math.abs(timeTotal / 60000);
            console.log('value for total time in minutes of', taskName, 'is', timeTotalPercent);
            var nowTillDeadline = Math.abs(deadline - now);
            var nowTillDeadlinePercent = Math.abs(nowTillDeadline / 60000);
            var timeElapsed = Math.abs(timeTotalPercent - nowTillDeadlinePercent);
            var timeElapsedPercent = Math.abs((timeElapsed / timeTotalPercent) * 100);

            // moving the progress bar
            bar.style.width = timeElapsedPercent + '%';

            if (timeElapsedPercent >= 99) {
                bar.style.width = '100%';
                clearInterval(interval);
            }
        }, (1*1000))
    }
}

fillBar();

Answer 1

Хорошо, настало время снова ответить на мой собственный вопрос.

Я включу HTML для строки, затем Javascript для манипуляции с ней:

<td class="col-sm-4">
    <div id="progressBarBackground">
        <div class="bar" id="progressBar"></div>
    </div>
</td>


function fillBar() {

    const interval = setInterval(() => {

        var i;

        for (i = 1; i < Table.rows.length; i++) {

            // grabbing relevant info from DOM
            var taskName = Table.rows[i].cells[0].innerText;
            var rawDeadline = Table.rows[i].cells[1].innerText;
            var rawStartTime = Table.rows[i].cells[2].innerText;
            var bar = Table.rows[i].cells[6].getElementsByClassName("bar").item(0);

            // calculations for progress bar
            var now = new Date();
            var startTime = new Date(rawStartTime.replace(/(am|pm)/, ''));
            var deadline = new Date(rawDeadline.replace(/(am|pm)/, ''));
            var timeTotal = Math.abs(deadline - startTime);
            var timeTotalPercent = Math.abs(timeTotal / 60000);
            var nowTillDeadline = Math.abs(deadline - now);
            var nowTillDeadlinePercent = Math.abs(nowTillDeadline / 60000);
            var timeElapsed = Math.abs(timeTotalPercent - nowTillDeadlinePercent);
            var timeElapsedPercent = Math.abs((timeElapsed / timeTotalPercent) * 100);

            // manipulating the necessary DOM element    
            bar.style.width = timeElapsedPercent + '%';

            if (timeElapsedPercent >= 99) {
                bar.style.width = '100%';
                clearInterval(interval);
            }
        }
    }, (1*1000))
}

Итак, мои проблемы были следующие:

1) For-l oop должен находиться внутри интервала, а не наоборот. Я где-то читал, что интервал - это просто время для -10 *. Для меня это был момент лампочки.

2) Использование .querySelector() для получения индикатора выполнения дает только первый, даже если он находится в цикле for; чтобы получить индикатор выполнения для каждой строки, понадобился метод .getElementsByClassName() в дополнение к методу .item() с его индексной позицией, которую вы никогда не узнаете из кода ошибки, полученного при выходе из него. вне. Поскольку в ячейке был только один элемент, его индексная позиция была равна 0.

3) В начале моего for-l oop я изменил с displayRows.length на Table.rows.length, но чтобы сделать это, мне пришлось изменить способ, которым я определил var Table. Вместо .getElementsByTagName() я использовал get .getElementById() - для моих собратьев заметьте, что это всего лишь один Элемент, а не Элементы.

Я думаю, что это были три основных вопроса. Вероятно, были и другие незначительные проблемы, но я попробовал около 100 разных вещей с этого момента и до того, как впервые опубликовал проблему, так что это трудно понять.

Я также использовал console.log в разные моменты, пока был устранение неисправностей все. Я удалил эти строки здесь ради аккуратности кода, но они были очень полезны.