целевые несколько пустых полей ввода с одинаковым идентификатором, содержащим скобки

Question

У меня есть пара полей ввода со следующим идентификатором:

<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">

Я получаю данные в формате JSON через мой вызов ajax и push() определенные значения в моем массиве.

Как я могу создать цикл, который будет циклически проходить по массиву, а затем вставлять каждое значение в одно из указанных выше полей ввода?

, скажем, у меня есть следующий массив:

var testArray = ['hi', 'bye', 'stackoverflow'];

и у меня есть следующие 3 поля ввода:

<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">

Всякий раз, когда я прохожу цикл, я, к сожалению, получаю самое высокое значение во всех моих полях ввода.

Я пытаюсьперебрать мой массив в JavaScript и вставить каждое значение в каждое поле ввода.поэтому testArray[0] должно идти в первом поле ввода, testArray[1] во втором поле ввода и testArray[2] в третьем.

Используемые мной источники: Поиск элемента DOM по идентификатору, когда идентификатор содержит квадраткронштейны

Answer 1

id в dom всегда уникален. Вместо этого используйте document.querySelectorAll, чтобы получить все элементы с одинаковыми именами, затем прокрутите их и используйте index, чтобы проверить, существует ли элемент в индексе testArray.Если это так, то установите значение входа

var testArray = ['hi', 'bye', 'stackoverflow'];
document.querySelectorAll('[name="numberC[]"]').forEach(function(item, index) {
  if (testArray[index]) {
    item.value = testArray[index]
  }

})

<input type="text" name="numberC[]" id="numberC[1]">
<input type="text" name="numberC[]" id="numberC[2]">
<input type="text" name="numberC[]" id="numberC[3]">

Answer 2

Если вы измените свой HTML, чтобы иметь разные идентификаторы

<input type="text" id="numberC[1]"/>
<input type="text" id="numberC[2]"/>
<input type="text" id="numberC[3]"/>

, вы можете легко установить следующие значения:

    var testArray = ['hi', 'bye', 'stackoverflow'];
    for(let i in testArray) {
        document.querySelector('#numberC\\[' + (+i+1) + '\\]').value = testArray[i];
    }