javascript - JS 和/或 D3 存储动态用户输入的方法

Question

我的问题与此处提出的问题类似:storing user input in array

我的用例在一个关键方面有所不同，我没有静态输入。在任何时候，我的页面上都可能有 1 到 3 个用户号码输入。它们也会被动态删除，所以我不能只创建它们，然后根据需要设置它们的样式，例如使用 display:hidden; .

我的问题是:什么是 js 解决方案，可以将用户输入存储到一个数组中，该数组对可能已或可能未附加的输入(如果元素不包含每个数组的 if 子句)具有鲁棒性尚未附加( !==null )。

或者如果 d3 有比 native JavaScript 更简单的方法将数字输入存储到数组中，那么这也是一个可以接受的答案。我假设这个选择:d3.selectAll('#input1,#input2,#input3')但我不确定是否可以从这样的选择中检索值并将其存储在数组中。

这是一个已解决的示例:

文档可能有 3 个输入，但假设文档的当前状态只有 2 个输入，其 ID 为:#input1和#input2 。所以我需要存储现有输入的值，并且 0 代表 #input3因为它还没有被创建。我不确定如何根据这些要求创建数组理解。我在想这样的事情:

my_array.push(d3.selectAll('#input1,#input2,#input3').each().value())

但正如我上面所说，我希望数组包含每个输入的值。 push()只会将另一个项目添加到数组中。如果事件监听器被触发超过 3 次，数组将超过 3 个值，这不是我想要的。我只想要一个用所有现有数字输入的当前值更新的数组(如果尚未附加输入，则值为 0)。

Answer 1

您的问题不太清楚，但在我看来，您想要获取输入的所有值，而不知道页面上有多少个输入值。

如果是这种情况，您只需使用...

d3.selectAll("input[type=number]")

...，当您调用该函数时，它将获取页面上存在的所有输入。

这是一个演示，请看控制台:

d3.select("button").on("click", function() {
  var inputs = [];
  d3.selectAll("input[type=number]").each(function() {
    inputs.push(this.value);
  })
  console.log(inputs);
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="form">
  <h1><b>Please enter data</b></h1>
  <hr size="3" />
  <br>
  <label for="input 1">Input 1</label>
  <input id="input1" type="number">
  <br>
  <label for="input 2">Input 2</label>
  <input id="input2" type="number">
  <br>
  <label for="input 3">Input 3</label>
  <input id="input3" type="text">
  <br>
  <hr>
</div>
<button>Submit</button>