Verwenden Sie Variablen in Schleife, die HTML-Elemente mit javaScript

Question

haben

Ich erstelle Form, die 2 Div haben jedes div hat 1 Label und 1 Textfeld.wie ich erstellte Label und Textbox-Variablen in For-Schleife verwenden kann. führe mich.

Etikett und Textfelder

var lbl1 = document.createElement(Label); 
lbl1.innerHTML = "First Name"; 


var lbl2 = document.createElement(Label); 
lbl2.innerHTML = "Last Name"; 


var elm1 = document.createElement(InputElement); 
elm1.setAttribute("type", "text"); 


var elm2 = document.createElement(InputElement); 
elm2.setAttribute("type", "text"); 

var signUpForm = document.createElement("form"); 
signUpForm.setAttribute("id", "signUpForm"); 

document.body.appendChild(signUpForm); 
var getSignUpForm = document.getElementById('signUpForm'); 
for(var i = 1 ; i<= 2;i++) 
{ 
    Div = document.createElement("div"); 
    for(var j=1;j<2;j++) 
    { 
     Div.appendChild("lbl"+j); 
     Div.appendChild("elm"+j); 
     getSignUpForm.appendChild(Div); 
    } 
} 

"lbl"+j nehmen als String nicht als elemt

Answer 1

Verwenden Objekt obj["lbl" + j] die Variablen und verwenden eckige Klammer Darstellung zu halten. Wie das Folgende.

var Label = 'label'; 
 
var InputElement = 'input'; 
 
var obj = {}; 
 
obj.lbl1 = document.createElement(Label); 
 
obj.lbl1.innerHTML = "First Name"; 
 

 
obj.lbl2 = document.createElement(Label); 
 
obj.lbl2.innerHTML = "Last Name"; 
 

 
obj.elm1 = document.createElement(InputElement); 
 
obj.elm1.setAttribute("type", "text"); 
 

 
obj.elm2 = document.createElement(InputElement); 
 
obj.elm2.setAttribute("type", "text"); 
 

 
var signUpForm = document.createElement("form"); 
 
signUpForm.setAttribute("id", "signUpForm"); 
 

 
document.body.appendChild(signUpForm); 
 
var getSignUpForm = document.getElementById('signUpForm'); 
 
for (var i = 1; i <= 2; i++) { 
 
    Div = document.createElement("div"); 
 
    for (var j = 1; j <= 2; j++) { 
 
    Div.appendChild(obj["lbl" + j]); 
 
    Div.appendChild(obj["elm" + j]); 
 
    } 
 
    getSignUpForm.appendChild(Div); 
 
}