如何使用 for 循環對用戶插入的數字求和？

Question

我正在嘗試創建一個簡單的項目，提示用戶輸入他想添加多少個數字（總和）。 然后當他單擊按鈕時，javascript 將創建多個與他插入的數字相等的輸入標簽，然后他將用一個數字填充它們並單擊另一個按鈕來計算求和的結果，這就是問題所在。 下面是一個簡化的片段，解釋了問題所在：

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;
    }

在 for 循環中，我如何將 getElementById 與變量 id （如 item1、item2、item3、...、itemN）一起使用？ 還有其他方法可以實現我想要的嗎？

Answer 1

您可以通過這種方式獲取ID為“y”+連續數字前綴的所有項目document.getElementById('y' + i).value;

不要對 function 名稱使用“添加”，函數不必以大寫字母開頭！

 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>

更好的方法是...

創建元素時，可以為它們分配一個 CLASS 屬性，該屬性是所有輸入元素的一個屬性。 然后，您可以使用此 class 從所有元素中獲取值。

例子：

 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

您可以使用...args收集 arguments 並使用.reduce將 arguments 添加在一起。

 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>