javascript - for 循环用于表单中的所有输入类型 - 已编辑

Question

我需要帮助来理解如何将此 block 转换为更简单的 for 循环:

var a,b,c;
a = parseInt(document.getElementById("a").value);
b = parseInt(document.getElementById("b").value);
c = parseInt(document.getElementById("c").value);

是否可以使用 for 循环从表单中获取所有值，然后将其存储在数组中？

arr = [];
for (var i = 0; i < 3; i++) {
    var letter = parseInt(document.......value);
    arr.push(letter);
} // end for

形式:

<form name="yourform">
    <table>
        <tr>
            <td><label for="a">Enter first number:</label></td>
            <td><input type="text" id="a" size="6"></td>
        </tr>
        <tr>
            <td><label for="b">Enter second number:</label></td>
            <td><input type="text" id="b" size="6"></td>
        </tr>
        <tr>
            <td><label for="c">Enter third number:</label></td>
            <td><input type="text" id="c" size="6"></td>
        </tr>
        <tr>
            <td></td>
            <td><button here onclick("functionhere") /></td>
        </tr>
    </table>

Answer 1

您可以通过使用查询字符串选择输入并使用Array.from映射到每个输入的值，一次性构建输入值数组:

const arr = Array.from(
  document.querySelectorAll('[name="yourform"] input'),
  input => input.value
);
console.log(arr);

<form name="yourform">
  <table>
    <tr>
      <td><label for="a">Enter first number:</label></td>
      <td><input type="text" id="a" size="6" value="a!"></td>
    </tr>
    <tr>
      <td><label for="b">Enter second number:</label></td>
      <td><input type="text" id="b" size="6" value="b!"></td>
    </tr>
    <tr>
      <td><label for="c">Enter third number:</label></td>
      <td><input type="text" id="c" size="6" value="c!"></td>
    </tr>
    <tr>
      <td></td>
      <td><button here onclick( "functionhere") /></td>
    </tr>
  </table>
</form>