如何使用 for 循环对用户插入的数字求和？

Question

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 1

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>

Answer 2

You can use ...args to collect arguments and use .reduce to add the arguments together.

 const items = document.getElementById("items"); for (var i = 0; i < 3; i++) { var inpt = document.createElement("input"); inpt.setAttribute("type","number"); //replaced with number inpt.setAttribute("style","margin:5px;"); inpt.setAttribute("id","y"+i); inpt.setAttribute("value",""); var newline = document.createElement("br"); items.appendChild(inpt); items.appendChild(newline); //added newline appending } function sum(...args) { return args.reduce((a, b) => a+b); //reduce arguments }

 <div id="items"></div><br /><button onclick="document.getElementById('answer').textContent = 'answer: ' + sum(+y0.value, +y1.value, +y2.value)">Add</button><div id="answer"></div>