How to use for loop to sum a numbers inserted by the user?

i’m trying to create a simple project where the user is prompted to enter how many numbers he would like to add(sum). then when he click the button, a javascript will create a number of input tags equal to the number he inserted and then he will fill them with a number and click another button to calculate the result of the summation and here is the problem. below is a simplified snippet explain what is the problem:

function CL(){
        const items = document.getElementById("items");
        for (var i = 1; i < 3; i++) {
              const inpt = document.createElement("input");
              inpt.setAttribute("type","text");
              inpt.setAttribute("style","margin:5px;");
              inpt.setAttribute("id","y"+i);
              inpt.setAttribute("value","");
              const newline = document.createElement("br");
              items.appendChild(inpt);
              items.appendChild(newline);
            }
    }

    function Add(){
        const y = 0;
        const sum = 0;
        var is;
        for (var i = 1; i < 3; i++) {
            is = i.toString();
         y = Number(document.getElementById('y'+ is).value);
         sum = sum + y;
    }
        document.getElementById("demo").innerHTML = sum;
    }

in the for loop how can i use getElementById with variables id like item1,item2,item3,…,itemN?? is there other way to achieve what i want?

Answer

You can take all items with ID “y” + consecutive number prefix on this way document.getElementById('y' + i).value;

Do not use “Add” for function name and Functions do not have to start with capital letters!

calckStart();

function calckStart() {
    const items = document.getElementById("items");
    for (var i = 1; i < 3; i++) {
        const inpt = document.createElement("input");
        inpt.setAttribute("type", "text");
        inpt.setAttribute("style", "margin:5px;");
        inpt.setAttribute("id", "y" + i);
        inpt.setAttribute("value", "");
        const newline = document.createElement("br");
        items.appendChild(inpt);
        items.appendChild(newline);
    }

    var button = document.createElement('button');
    button.innerHTML = 'ClickMe'
    items.appendChild(button);

    button.addEventListener('click', calculateVal);
}

function calculateVal() {
    var res = 0;
    for (var i = 1; i < 3; i++) {
        res = res + +document.getElementById('y' + i).value;
    }

    var items = document.getElementById("items");
    var result = document.createElement('div');
    result.innerHTML = res;
    items.appendChild(result);
}

<div id="items"></div>

A better way is …

When you create elements, you can assign them a CLASS attribute that is one for all input elements. You can then take the values from all elements with this class.

Example:

        
calckStart();

function calckStart() {
    const items = document.getElementById("items");
    for (var i = 1; i < 3; i++) {
        const inpt = document.createElement("input");
        inpt.setAttribute("type", "text");
        inpt.setAttribute("style", "margin:5px;");
        // inpt.setAttribute("id", "y" + i);
        inpt.setAttribute("value", "");
        inpt.setAttribute("class", "numbers");  //<-- Set class
        const newline = document.createElement("br");
        items.appendChild(inpt);
        items.appendChild(newline);
    }

    var button = document.createElement('button');
    button.innerHTML = 'ClickMe'
    items.appendChild(button);

    button.addEventListener('click', calculateVal);
}

function calculateVal() {
    var list = document.getElementsByClassName('numbers'); //<-- Get by class
    var res = 0;
    for (var i = 0; i < list.length; i++) {
        res = res + +list[i].value;
    }

    var items = document.getElementById("items");
    var result = document.createElement('div');
    result.innerHTML = res;
    items.appendChild(result);
}

<div id="items"></div>