javascript - 我尝试将类似数组的元素集合分配给变量，我的代码有什么问题？

Question

我尝试在 inputs 上运行 forEach 循环并将每个元素分配给一些变量，但有些东西无法正常工作。

不确定为什么我的变量一直“未定义”。

js 文件:

var inputs = document.querySelectorAll("input[type=text]");

inputs.forEach(function(item, index, array){

    var inputName, inputLastName, inputAge;

    if(array[index].name === "name"){
        inputName = array[index];
    }
    if(array[index].name === "lastName"){
        inputLastName = array[index];
    }
    if(array[index].name === "age"){
        inputAge = array[index];
    }
});

html 文件:

<form action="">
    <label for="name"> Name:
        <input type="text" name="name">
    </label>

    <label for="lastName"> Last Name:
        <input type="text" name="lastName">
    </label>

    <label for="age"> Age:
        <input type="text" name="age">
    </label>
</form>

Answer 1

您的实际代码运行良好，期望您将 inputName、inputLastName、inputAge 变量设置为 foreach 循环的局部变量，以便在循环之外无法访问它们.

您需要在循环外声明它们。这是一个工作片段:

var inputs = document.querySelectorAll("input[type=text]");

var inputName, inputLastName, inputAge;

inputs.forEach(function(item, index, array) {


  if (item.name === "name") {
    inputName = array[index];
  }
  if (item.name === "lastName") {
    inputLastName = array[index];
  }
  if (item.name === "age") {
    inputAge = array[index];
  }
});

console.log(inputName);

<label for="name">Name:
  <input type="text" name="name">
</label>

<label for="lastName">Last Name:
  <input type="text" name="lastName">
</label>

<label for="age">Age:
  <input type="text" name="age">
</label>

您也可以使用item.name代替array[index].name来获取当前迭代的元素。