Question

我有以下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)
}

由于我有多个输入元素，我想将它们的值存储在数组中。如果我在同一个输入元素中输入另一个值 - 我已经在其中输入了一些其他值 - 我怎样才能找出第一次存储前一个值的位置，从而将其替换为新值？

Answer 1

您可以使用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事件在您键入时立即显示结果。

Answer 2

简单地不使用数组，使用对象。

对象会将输入元素的id映射到它们的值

"use strict";
(function() {
  var values = {};

  function updateAllInputs() {
    var inputs = document.querySelectorAll('input');

    Array.prototype.forEach.call(inputs, function (input) {
      // ensures exactly one value per input (if all inputs have ids, adjust as needed)
      values[input.id] = input.value;
    });
  }

  // if you still need an array for some reason, you can create one from the object.
  function getSnapshotOfInputValuesAsArray() {
    return Object.keys(values).map(function(key) {
      return values[key];
    });
  }
}());

在阵列中存储最新的输入值

2 个答案: