如何使用 Array.from 和 forEach 从多个表单字段值中获取值答案

【问题标题】：How to get values from multiple form field values using Array.from and forEach如何使用 Array.from 和 forEach 从多个表单字段值中获取值
【发布时间】：2019-11-05 17:29:47
【问题描述】：

假设我有一个表格：

<form>
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="submit" value="Press Me">
</form>

现在假设我使用getElementsByClassName 创建这些元素的数组：

let filledBlanks = Array.from(document.getElementsByClassName( 'blanked' ));

现在我想遍历用户在每个输入中输入的值：

filledBlanks.forEach( filledBlank => {
  let inputText = filledBlank.???;
}

这就是我被绊倒的地方。我用什么来获取填充值（不是 .value）？或者有没有更好的方法来做到这一点？

【问题讨论】：

为什么不是filledBlank.value？
“我用什么来获取填充值（不是.value）” 为什么？
您可以为此使用innerHTML
感谢大家的反馈。 .value 最初对我不起作用，这就是为什么我在上面说不是 .value ......但是在听到它应该工作后，我回过头来意识到我的 JS 在页面最初加载时正在运行，而不是 onclock 事件因此为什么 value 之前一直为我返回空值。

标签： javascript html forms foreach getelementsbyclassname

【解决方案1】：

.value 属性工作得很好。我不明白你为什么需要别的东西。如果您只想迭代这些值，您可以先映射您的输入，但我不明白这一点。

请注意，我只使用 Jquery 来收听submit 事件。剩下的就是纯原生的 Javascript。

$('form').on('submit', (event) => {
  event.preventDefault();
  
  let filledBlanks = Array.from(document.getElementsByClassName( 'blanked' ));
  filledBlanks.map((input) => {
    return input.value;
  }).forEach((value) => {
    console.log(value);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="text" class="blanked">
  <input type="submit" value="Press Me" id="submit">
</form>

【讨论】：

谢谢尼古拉斯。正如我在上面的 cmets 中提到的，问题出在我的代码的其他地方。我有一个函数之外的 JS，它在页面加载时运行，而不是在单击提交按钮后运行，所以它总是返回空......这就是为什么我认为 value 不起作用。