nodeListの特定のノードの値を取得する方法は？

Question

私は、ページ上の4つの入力（高さ、体重、年齢、性別）に対してquerySelectorAllを使用し、それぞれに変更イベントを追加しています。

var inputs = document.querySelectorAll('input');

input.addEventListener('change', changeValue));

私はその後、私はそれを行うだろうか、ループの中に、項目値のすべての文字列を作成したい場合は？

基本的には、インデックスとして一般的なものを使用せずに、特定の入力値をどのようにループから取り出すのかはわかりません。

Answer 1

あなたがそれらをJSON.stringifyでき

「私は、すべてのアイテムの文字列を作成したい場合はは値」。また、Javascriptでセットを扱うときに私がたくさん使う1つのアプローチは、配列内でforEachを反復することです。

このような何かがはるかに複雑せずにそれを行うだろう：

function getInputItems(inputs) { 
    var inputItems = {}; 
    Array.from(inputs).forEach(function(item) { 
     inputItems[item.name] = inputItems[item.value]; 
    }); 
    return JSON.stringify(inputItems); 
} 

編集：

querySelectorAllはES5以来forEachを実装し、そうquerySelectorAllを変換するためにまともなブラウザ上の必要がないと思われ結果はArray.fromである。

Answer 2

querySelectorAllは、ECMAScript 5 forEachループを使用してループすることができるnodeListを返しますが、各要素を識別できるものが必要です。

var inputs = document.querySelectorAll('input'); 
var results = ""; 

inputs.forEach(function(input){ 
    input.addEventListener('change', changeValue)); 

    var postfix = ""; 

    // check the current input's id and determine the correct 
    // unit of measurement/qualification for the element's value 
    switch(input.id){ 
    case "height" : 
     postfix = "inches"; 
     break; 
    case "weight" : 
     postfix = "lbs";  
     break; 
    case "age" : 
     postfix = "years";  
     break; 
    case "gender" : 
     postfix = "gender";  
     break; 
    } 

    // Append the input's value and unit of measurement/qualification 
    // to a string 
    results += "," + input.value + postfix; 
}); 

// output the final string 
console.log(results); 

Answer 3

さてあなたは、一種の? :間違っ三項演算子を処理している：idは、通常、最良の方法です。 それにもかかわらず、ここに私の実装方法があります。上記の答えは行いますが、マップされたオブジェクトを保持して、ケースの式を書く必要はありません。ここ

var inputs = document.querySelectorAll('input'); 
    //var inputs = Array.prototype.slice.call(document.querySelectorAll('input')) for older browsers not supporting forEach on Node lists 


    function changeValue(){ 
     var mapped = { 
     "weight":" lbs",// note the extra space is intentional 
     "height":" inches" // note the extra space is intentional 
     } 
     this.value = this.value + mapped[this.name]; 

    } 
    inputs.forEach(function(e){ 
     e.addEventListener('change', changeValue); 
    }) 

の作業フィドル：それは `HTMLCollection`返すようhttps://jsfiddle.net/aminajani17/abbxbLoo/