Question

我的问题类似于此处提出的问题：storing user input in array

我的用例在一个关键方面有所不同，我没有静态输入。在任何时候，我的页面上可能有1到3个用户编号输入。它们也会动态删除，因此我无法全部创建它们，然后根据需要设置它们，例如使用display:hidden;。

我的问题是：什么是js解决方案，可以将用户输入存储到数组中，该数组对于在元素事件中每个数组没有if子句的情况下可能添加或者可能没有附加的输入还没有被追加（!==null）。

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

这是一个经过深思熟虑的例子：

该文档可能有3个输入，但我们可以说文档的当前状态只有2个带有ID的输入：#input1和#input2。所以我需要存储现有输入的值，并为#input3存储0，因为它尚未创建。我不确定如何根据这些要求创建数组理解。我想的是：

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>

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

1 个答案: