javascript - 将最新的输入值存储在数组中

我有以下HTML：

<input  class="type"  id="carbNumber">
<input  class="type"  id="otherId">

我想将输入值存储在一个对象中。

let data = {
    inputData: []
}

document.querySelector('input').addEventListener('blur', updateItem)

function updateItem(){
    data.inputData.push(this.value)
}

因为我有多个输入元素，所以我想将它们的值存储在数组中。如果我在同一个输入元素中输入了另一个值-我已经在其中输入了其他值-如何确定第一次存储先前值的位置，然后将其替换为新值？

最佳答案

您可以使用input元素中由querySelectorAll返回的索引号：

const data = {
    inputData: []
}

// Use the callback argument of `Array.from` and the `i` index:
Array.from(document.querySelectorAll('input'), (inp, i) => {
    inp.addEventListener('input', updateItem.bind(inp, i)); // pass `i`
});

function updateItem(i){ // capture `i`
    data.inputData[i] = this.value;
    console.log('inputData:' + data.inputData);
}

<input id="a">
<input id="b">
<input id="c">

注意：我使用input事件在键入时立即显示结果。