Javascript 循环遍历每个元素并向新对象添加值。将这些对象添加到数组并访问其值

我有一个名为lineNumber的元素，它包含一些表单输入。所有输入值都存储在变量中

<div class="lineNumber">    
        <div class="input-container">
            <label>Example Line 1 :</label>
            <input type="text" name="lineText" value="John's Electrical" class="lineText">
        </div>
        <!-- more inputs... -->
    </div>

希望最终得到多个lineObjects，我可以从eg访问这些值

lineObject[1].lineNumberValue或Object.entrieslineObject[1]

不确定对象是否会进入数组？乙二醇

objectArray[ lineObject[1], lineObject[2] ];

希望得到一些关于如何实现这一目标的指导，或者对我的方法提出建设性的批评。我只是不确定我的方法是否正确，是否可以使用一些反馈。

您尝试查询的每个查询是否都有name=linetext？如果是这样的话，您可以使用如下方式迭代lineNumber div并遍历它们下面的linetext输入：

lineObjects = Array.from(document.querySelectorAll('div.lineNumber')).map(div => {
  return Array.from(div.querySelectorAll('input[name="linetext"]')).map(input => {
    // do whatever you need to do with each div and input
    const lineObject = {
      div: div,
      input: input,
      value: null,  // set automatically by listener
      removeListener: null  // call when lineObject no longer needed
    };
    const listener = event => {
      lineObject.value = event.target.value;
    }
    input.addEventListener('keyup', listener);
    lineObject.removeListener = () => input.removeEventListener('keyup', listener);
    return lineObject;
  });
});
lineObjects = lineObjects.flat(); // convert array of arrays to flat array

---

顺便说一句，这已经是相当笨拙的，它是为一个单一的功能。在清除现有lineObjects上的侦听器后，还必须在添加新的行号时再次运行此操作。如果可能的话，我建议使用React这样的框架。

谢谢。每个输入都是唯一的，但我已经将每个输入的值存储在一个变量中。每个行号只有一个行文本。仅将vanilla js用作学习体验。如果变量中有所有的值，我就不能像我的示例那样将它们作为键：值对添加到对象中吗？听起来你想要双向绑定，JS对象会随着DOM元素的变化而变化，反之亦然。在给定的时间内，您可以很容易地获得您想要的所有值。但是，您需要管理事件侦听器以获得更改，否则变量中的值将过时。处理动态添加和删除的DOM元素也很棘手。你的权利和我实际上对你提到的所有问题都有处理权。我觉得我想得太多了，因为听起来不应该那么复杂。如果我为每条新线运行createLineObject，我只需要在循环lineNumber时向对象添加值。感谢你，这并不是什么好消息。至少我可以查看一些双向绑定的文档，但我不知道该术语。

lineObjects = Array.from(document.querySelectorAll('div.lineNumber')).map(div => {
  return Array.from(div.querySelectorAll('input[name="linetext"]')).map(input => {
    // do whatever you need to do with each div and input
    const lineObject = {
      div: div,
      input: input,
      value: null,  // set automatically by listener
      removeListener: null  // call when lineObject no longer needed
    };
    const listener = event => {
      lineObject.value = event.target.value;
    }
    input.addEventListener('keyup', listener);
    lineObject.removeListener = () => input.removeEventListener('keyup', listener);
    return lineObject;
  });
});
lineObjects = lineObjects.flat(); // convert array of arrays to flat array