根據動態添加的表單字段中的 HTML 輸入動態創建變量，然后在 for 循環字符串中使用它們

Question

我過去曾多次使用 for 循環，但是當我想將它與 HTML 中的 ID 值一起使用時，這讓我頭疼，而且將它們分開放入一個字符串中。

到目前為止，在另一個問題的幫助下，我有一個簡單的程序，可以讓我在 HTML 中添加和刪除輸入字段。 但是，每當添加一個變量時，我想將每個表單字段的輸入值分配給一個變量。 到處玩，這似乎很困難，因為我不能以 for 循環方式調用 HTML 中的 ID。

最后，我想在添加新字段時將它們放入動態字符串中：

"The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors."

但是每當添加一個新變量（輸入到添加的字段中）時，我希望它添加另一個“和”+ colorNum#。

如果我提前添加尚不存在的變量，或者如果我不為它們添加表單字段，程序似乎會感到困惑。

當然，當我嘗試以下操作時，創建 for 循環不起作用：

var colorNum[i] = document.getElementById("field" + i).value

因為……這是不允許的。 我很難弄清楚如何做到這一點。 現在我為 colorNum 調用了變量，但我正在嘗試動態地執行它。 這在嘗試從 ID 獲取值並將其傳輸到 for 循環時很困難。

HTML：

<ul id="fields">
</ul>
<a onclick="createinput()">Create an input</a>

<p id="commentHere"><p>

JS：

var count = 0;
window.createinput = function(){
    var field_area = document.getElementById('fields')
    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = 'field' +count;
    input.name = 'field'+count;
    input.type = "text";
    li.appendChild(input);
    field_area.appendChild(li);
    //create the removal link
    var removalLink = document.createElement('a');
    removalLink.className = "remove";
    removalLink.onclick = function(){
        field_area.removeChild(li); 
        count--;
    }
    removalLink.appendChild(document.createTextNode('Remove Field'));
    li.appendChild(removalLink);
    count++;
    console.log(input.id);
  console.log("Count: " + count);
  
var colorNum0 = document.getElementById("field0").value;
var colorNum1;
var colorNum2;
  console.log(colorNum0);
  
var comment = "The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors.";
  
document.getElementById("commentHere").innerHTML = comment;
  
}

Answer 1

您可以使用以下代碼片段獲取所有輸入的值：

function getInputsData() {
  const inputs = document.getElementsByTagName('input');
  const data = [];
  for (let inp of inputs) {
    data.push(inp.value);
  }
  return data;
}

考慮到您沒有任何其他輸入字段。 如果你有，你可以像你一樣為每個輸入分配一個類或 id，並獲取值：

function getInputsData() {
    const data = [];
    const inputs = document.getElementsByClassName('field');
    for (let inp of inputs) {        
        data.push(inp.value);
    }
    return data;
}

對於這種情況，我為每個輸入字段添加了類：

input.classList.add('field')

Answer 2

Bergi 的評論對我所擁有的幫助已經足夠了。 我今天不會檢查這個，所以我想我現在應該把它標記為已回答。 我所擁有的很好，我只需要將 colorNum 分配給一個數組。 至於把它放在我的字符串中，我將不得不改天再玩一下 - 不需要在一個加載的問題中。

編輯：除非有人對字符串有想法？ 我將嘗試弄清楚如何在以文本分隔的字符串中列出數組中的每個項目，而無需為每個輸入創建數十個新變量。

編輯2：我想出了我將如何做上面的部分。 在我擁有數組之后，我只需轉換為字符串，然后從那里拆分/插入/其他字符串即可。

var colorNumX = [];
for (i = 0; i <= count - 1; i++) {
   colorNumX[i] = document.getElementById("field" + i).value;
}

var colorString = colorNum.toString();