Wie kann ich neue Variablen innerhalb einer Schleife erstellen?

Question

Ich habe ein Formular und ich möchte die Werte von ihren IDs abrufen. Anstatt var zu schreiben itemnamehere = document.getElementById ('theid'); mehrmals möchte ich in der Lage sein, die Eingaben im Formular zu durchlaufen und Variablen innerhalb einer for-Schleife zu erstellen.

Dies ist, was ich

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

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

     //create new variable here 

    } 

Answer 1

Da getElementsByCLassName gibt ein Nodelist Sie nicht getAttribute auf sie bisher haben können, weil diese Methode nur für einzelne Elemente reserviert ist. ABER du brauchst die ID auch nicht, wenn ich deine Frage verstehe. Sie können einfach über die Nodeliste iterieren, die Sie mit getElementsByCLassName erhalten und tun, was Sie mit den Eingaben benötigen, wie ihre Werte greifen.

Hier ist, wie Sie es mit ES6 nähern könnten:

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" />

Wenn Sie wollten IDs verwenden Sie vielleicht eine Karte von ids gegen Werte erstellen möchten.

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" />

Und hier ist die ES5 Methode: Sie könnten mit reduce etwas tun

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 ist nicht perfekt Ansatz mehrere Form zu erhalten Eingabewerte bei Verwendung einer Schleife.