コンソールから入力フィールドへの入力による未定義の結果

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」を返します。 NodeListsにはvalueというプロパティがないため、未定義に戻ります。

各入力ボックスから値を取得する場合は、NodeListをループして、各HTML要素からvalueを個別に取得する必要があります。これにfnを

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); 

Answer 2

変更：

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