Ist es möglich, Variablen als dom-Elemente zu verwenden?

Question

Ich habe mehrere Eingabefelder in einem Formular mit jeweils einem eindeutigen Namen. Zum Beispiel, um die Farbe zu ändern, würde ich tun:

testForm.username.style.background = "yellow"; 

username sind der Name des Eingangs und testform ist der Formularname

Ich möchte, dies zu tun: ersetzen username mit einer variablen elem so, dass, wenn Ich rufe die Funktion auf, um die Hintergrundfarbe zu ändern, ich muss nicht für jedes eindeutige Feld eine separate Funktion haben. Ich würde nur den elem Namen senden und diese Funktion würde für jedes Feld funktionieren.

testForm.elem.style.background = "yellow"; 

Mein Problem ist, dass es nicht funktioniert. Zum Beispiel hat es die elem in die Funktion in Ordnung, aber es sagt, dass testForm.elem.stylenull ist. Aus irgendeinem Grund mag Javascript Variablen für Elementnamen nicht, die ich rate?

Answer 1

var elem = 'username'; 
testForm[elem].style.background = 'yellow'; 

Answer 2

Sie müssten ein Eval machen, um etwas zu tun, zB eval ("testform." + Elem + ".style.background = yellow");

Answer 3

versuchen

testForm [elem].style.background = "yellow"; 

oder

var elem = testForm.username 
elem.style.background = "yellow"; 

im ersten Fall elem hält den Benutzernamen, und im zweiten Fall, elem zeigt auf die tatsächliche DOM-Element.

Answer 4

Eine Eigenschaft eines JavaScript-Objekts (in diesem Fall die "username" -Eigenschaft des Objekts "testform") kann entweder mit object.property oder object["property"] Syntax zugegriffen werden. Da die zweite Form eine Zeichenfolge (wie in den Anführungszeichen angegeben) enthält, kann eine Variable, die eine Zeichenfolge enthält, ebenfalls mit dieser Syntax verwendet werden. Daraus folgt:

testform[elem].style.background = "yellow";

wird tun, was Sie wollen.

Answer 5

Es klingt wie Sie eine Funktion erstellen, um dies trotzdem zu tun. In diesem Fall, warum verwenden Sie die folgende Funktion nicht nur:

function changeBackgroundOfElementToYellow(element){ 
    element.style.background = "yellow"; 
} 

Und nennen Sie es mit:

changeBackgroundofElementToYellow(testForm.username); 

Im Allgemeinen finde ich die RaYell/kangax Methode bereits gebucht, besser zu sein, aber das ist eine andere Möglichkeit.