Добавление чисел, введенных в текстовые поля, которые генерируются из цикла

Question

У меня есть функция, которая генерирует текстовые поля из цикла for

var txtBox = "<input type='text' id='txtNum[]' />"
for(var i = 0; i<=names.length;i++)//retrieve names from the array
    {
        html += "<tr id='row" + i +"'><td style='border:1px solid black;'>"+names[i]+"</td>";
        for(var j=1;j<=2;j++)//amount of textboxes need to be created
        {
            html+= "<td style='border:1px solid black;'>"+txtBox+"</td>";
        }
        for(var k=1;k<=1;k++)//amount of textboxes need to be created
        {
            html+= "<td style='border:1px solid black;'>"+txtBox+"</td>";
        }
        html += "</tr>";        
    }

этот цикл for будет генерировать 3 текстовых поля в строке с одинаковым идентификатором до тех пор, пока длина имен не будетвстретил, но моя проблема в том, что я хочу вычислить, скажем, сложение тех значений, которые будут введены в текстовые поля, но не имеет никакого шанса найти способ сделать это.Я искал в Интернете примеры, но почти все они показывают текстовые буки с другим идентификатором, вычисляемым, ни одного, который я видел с идентификатором в виде массива.

Я ограничен только javascript и html.

Есть идеи, как этого добиться?
Заранее спасибо.

Answer 1

Во-первых.Идентификаторы являются идентификаторами.Не может быть другого человека с таким же идентификатором, как у вас, поэтому не должно быть двух элементов с одинаковыми идентификаторами.Используйте класс вместо. HTML-классы

Для вашей проблемы.Когда вы изменяете его на класс, вы можете использовать

let arr = document.querySelectorAll(".CLASS_NAME")

.querySelectorAll

или

let arr = document.getElementsByClassName('CLASS_NAME')

.getElementsByClassName

, чтобы получить массив всех полей ввода, а затем просто

arr.ForEach((e)=>{
/*FUNCTION BODY HERE. HERE WILL BE ADDITION*/
let valueOfOneOfThem = parseInt(e.value) || 0;
sumOfAll += valueOfOneOfThem;
});

.ForEach

Рабочая скрипка