Скрипт подсчета суммы сумм данных

Question

Задаю данные

 <th><input type="text" name="items[1][quantity]"  value="" id="quantity_1" onchange="ff(1)" class="form-control" placeholder="Количество"></th>
 <th><input type="text" name="items[1][cost]" id="cost_1" onchange="ff(1)" class="form-control" placeholder="Стоимость"></th>
 <th><input type="text" name="items[1][sum]" id="sum_1" onchange="ff(1)" readonly value="" class="form-control" placeholder="Сумма"></th>
 
 <label class="col-md-4 control-label">Сумма</label>
                        <div class="col-md-4">
                            <p><input class="form-control" name="total_sum" type="text" id="total" readonly></p>
                        </div>

Обрабатываю в данном скрипте

<script>
    function ff(id)
    {
        var cost = document.getElementById('cost_'+id).value;
        var quantity = document.getElementById('quantity_'+id).value;
        var sum = Number(cost) * Number (quantity);
        document.getElementById('sum_'+id).value = sum;
        console.log("sum");
        var elements = document.getElementsByClassName("sum");
        var names = '';
        var total = '';
        console.log(elements);
        for(var i=0; i<elements.length; i++)
        {
            names += elements[i].name;
            total = Number(total) + Number(elements[i].value);
        }
        console.log(total);
        document.getElementById('total').value = total;
    }
</script>

Первая сумма считается, а вот total нет. Подскажите в чем ошибка.

Answer 1

Ну все просто:

var elements = document.getElementsByClassName("sum");

а где у вас класс sum?

Поэтому ничего не находит и elements.length у вас просто равно 0 со всеми вытекающими

Сделайте хотя бы так:

 <th><input type="text" name="items[1][quantity]"  value="" id="quantity_1" onchange="ff(1)" class="form-control sum" placeholder="Количество"></th>

P.S.

кстати, а почему бы не воспользоваться современными возможностями JS?

    function ff(id)
    {
        let cost = document.querySelector(`#cost_${id}`).value;
        let quantity = document.querySelector(`#quantity_${id}`).value;
        let sum = Number(cost) * Number (quantity);
        document.querySelector(`#sum_${id}`).value = sum;
        let elements = document.querySelectorAll(".sum");
        let names = '';
        let total = 0;
        for (let obj of elements)
        {
            names += obj.name;
            total += Number(obj.value);
        }
        document.querySelector('#total').value = total;
    }

Answer 2

Ошибка в строке

 var elements = document.getElementsByClassName("sum");

Когда пытаюсь вывести в консоль elements и посмотреть что в нем лежит, можно увидеть, что он пуст

Соответственно, цикл не сработал, ибо elements.length равно 0

БЛОГ НА HUSL

Скрипт подсчета суммы сумм данных

Ответы (2 шт):