ループ内で新しい変数を作成するにはどうすればよいですか？

Question

私はフォームを持っており、そのIDで値を取得したいと考えています。 varを書く代わりにitemnamehere = document.getElementById（ 'theid'）;複数回、私はフォームの入力をループし、forループ内の変数を作成できるようにしたい。

これはgetElementsByCLassNameは、その方法は、ただ一つの要素のために予約されているので、あなたがそれにgetAttributeを使用することはできませんノードリストを返すので、私はこれまで

var gsItems = document.getElementsByClassName('gsinput').getAttribute('id'); 

    for(var i = 0; i < gsItems.length; i++){ 

     //create new variable here 

    } 

Answer 1

持っているものです。しかし、もし私があなたの質問を理解していれば、あなたはIDを必要としません。 getElementsByCLassNameで取得したノードリストを繰り返し処理し、値を取得するなど、入力に必要な処理をすべて行うことができます。ここで

は、あなたがES6でそれに近づく可能性がある方法は次のとおりです。

const gsItems = document.getElementsByClassName('gsinput'); 
 

 
[...gsItems].forEach(item => { 
 
    console.log(item.value); 
 
});

<input class="gsinput" value="1" /> 
 
<input class="gsinput" value="2" /> 
 
<input class="gsinput" value="3" /> 
 
<input class="gsinput" value="4" /> 
 
<input class="gsinput" value="5" />

あなたがIDを使用したい場合は、値に対してIDのマップを作成することもできます。

const gsItems = document.getElementsByClassName('gsinput'); 
 

 
const obj = [...gsItems].reduce((obj, item) => { 
 
    obj[item.id] = item.value; 
 
    return obj; 
 
}, {}); 
 

 
console.log(obj);

<input class="gsinput" id="steve" value="1" /> 
 
<input class="gsinput" id="daisy" value="2" /> 
 
<input class="gsinput" id="tina" value="3" /> 
 
<input class="gsinput" id="dennis" value="4" /> 
 
<input class="gsinput" id="bob" value="5" />

をそしてここでES5方法です：あなたはreduceでこのような何かを行うことができ

const gsItems = document.getElementsByClassName('gsinput'); 
 

 
Array.prototype.forEach.call(gsItems, function (item) { 
 
    console.log(item.value); 
 
});

<input class="gsinput" value="1" /> 
 
<input class="gsinput" value="2" /> 
 
<input class="gsinput" value="3" /> 
 
<input class="gsinput" value="4" /> 
 
<input class="gsinput" value="5" />

Answer 2

Idは、複数のフォームを取得するのに最適なアプローチではありませんループを使用するときに値を入力します。