Question

我需要帮助来了解如何将该块转换为更简单的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

只需选择表单容器中所有具有type=text的输入元素，然后使用Array.prototype.map对其进行遍历：

let inputs = myFormTable.querySelectorAll('input[type=text]');

btn.addEventListener('click', () => {
  let numbersArr = [...inputs].map(e=>e.value);
  let [ x, y, z ] = numbersArr;
  console.log(numbersArr);
  console.log(x);
  console.log(y);
  console.log(z);
})

label { display: inline-block; width: 180px; }

<div id="myFormTable">
  <label for="a">Enter first number:</label>
  <input type="text" id="a">
  <br />
  <label for="b">Enter second number:</label>
  <input type="text" id="b">
  <br />
  <label for="c">Enter third number:</label>
  <input type="text" id="c">
  <br />
  <button id="btn" type="button">show numbers</button>
</div>

Answer 2

您可以通过使用查询字符串选择input并使用Array.from映射到每个输入的value来一次构造输入值的数组：

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>

Answer 3

是的，您只需要一个包含变化的事物的数组。

const results = [];
['a', 'b', 'c'].forEach(function (id) {
    const element = document.getElementById(id);
    const result = parseInt(element.value, 10); // Don't use parseInt without specifying the number base!
    results.push(result);
});

Answer 4

尝试这样做！

function getElements() {
    var len = document.getElementById("frm").elements.length;
    for(var i = 0; i < len; i++) {
        console.log(document.getElementById("frm").elements[i].value);
    }
}

<form id="frm">
    <input type="text/html" name="name" id="name"/>
    <input type="text/html" name="email" id="email"/>
    <input type="text/html" name="phone" id="phone"/>
    <input type="button" value="send" onclick="getElements()"/>
</form>

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

4 个答案: