So rufen Sie eine globale Variable document.getElementById in eine Funktion auf, um den .className zu erhalten

Question

Das ist, was ich verwende, um zwischen den Login- und Registerdivs zu wechseln.

Die folgende tatsächlich funktioniert:

function myNavLogin() 
{ 
    document.getElementById("Content-Login").className = "Content-On"; 
    document.getElementById("Content-Register").className = "Content-Off"; 
} 

ich die nächste globale Variable nennen wollen:

var divLogin = document.getElementById("Content-Login"); 
var divRegister = document.getElementById("Content-Register"); 

Innerhalb der Funktion wie auf diese Weise:

function myNavLogin() 
{ 
    divLogin.className = "Content-On"; 
    divRegister.className = "Content-Off"; 
} 

Das zweite Beispiel funktioniert nicht, denke ich, weil die Variable nicht korrekt deklariert ist oder ich anrufe es ist schlecht ... bitte hilf, danke.

Grüße, Chicler;)

Answer 1

Ihre Frage ist wahrscheinlich eine einfache Variable Scoping ein, aber hier ist eine gründlichere Antwort trotzdem. Globale Variablen sind eine schreckliche Art zu programmieren. Sie sollten versuchen, einen objektorientierten Ansatz zu verwenden. Sie sollten auch in Betracht ziehen, Tag-Namen aus Ihren Variablennamen zu entfernen, da sich Markup ändern kann. Schließlich, beim Umschalten von Klassen, ist es besser, einfach einen "An" -Zustand hinzuzufügen und zu entfernen und den "Aus" -Zustand als Standard festzulegen. Hier ist ein Beispiel:

var AccountLogic = function(){ 
    this.elLogin = document.getElementById("Content-Login"); 
    this.elRegister = document.getElementById("Content-Register"); 
    this.login = function(){ 
    this.elLogin.classList.add("content-on"); 
    this.elRegister.classList.remove("content-on");} 
    } 
} 

var accountLogic = new AccountLogic();