javascript - 通过输入数组字段在控制台中出现未定义的结果

Question

为什么当我按下“提交”按钮时，所有按钮都未定义？

我想通过使用这样的输入字段来创建一个数组。

还有其他方法可以做到这一点吗？

我尝试使用类名来执行此操作，但结果仍然未定义

function clicked() {
    var input_value = document.querySelectorAll('#data, #data1, #data2, #data3, #data4').value;
    console.log(input_value)
}

document.getElementById('btn').addEventListener('click', clicked);

<input id="data">
<input id="data1">
<input id="data2">
<input id="data3">
<input id="data4">
<button id="btn">Click me</button>

Answer 1

querySelectorAll 将返回一个“NodeList”，它类似于一个数组。 NodeList 没有 value 属性，因此它返回未定义。

如果您想从每个输入框中获取值，则需要循环遍历 NodeList 并分别从每个 HTML 元素中提取值。

function clicked() {
    var nodeList = document.querySelectorAll('#data, #data1, #data2, #data3, #data4');
    for (var i = 0; i < nodeList.length; i++) {
      console.log(nodeList[i].value);
    }
}

document.getElementById('btn').addEventListener('click', clicked);