루프 내에서 새 변수를 만들려면 어떻게해야합니까?

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

때문에이 것입니다. 그러나 당신의 질문을 이해할 때도 이드가 필요하지 않습니다. 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

이드 여러 양식을 얻을 수있는 완벽한 방법은 아니다 루프를 사용할 때 값을 입력하십시오.