Ich versuche, die Hintergrundfarbe mit JS zu wechseln

Ich bin neu in JavaScript und ich versuche, eine Schaltfläche zum Ändern der Hintergrundfarbe eines Elements durch Ändern der Klasse zu erhalten. Ich habe js aus ein paar verschiedenen Quellen kombiniert, aber es funktioniert nicht und ich kann nicht herausfinden, warum.Ich versuche, die Hintergrundfarbe mit JS zu wechseln


 
    
 
function myFunc() { 
 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
 
    if (y === "normal") { 
 
    y = "active"; 
 
    } else { 
 
    y = "normal"; 
 
    } 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<body> 
 
    <button onclick="myFunc()">click here</button> 
 
    <div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
    </div> 
 
</body>

Quelle

2017-11-02 MightyCactus

Sie müssen den Wert am Ende zuweisen, Sie erhalten nur den Wert, der nicht genug ist. Sie vermissen einfach document.getElementById("bg-change1").setAttribute("class",y); am Ende der Funktion.

function myFunc() { 
 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
 
    if (y === "normal") { 
 
    y = "active"; 
 
    } else { 
 
    y = "normal"; 
 
    } 
 
    document.getElementById("bg-change1").setAttribute("class",y); 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<body> 
 
    <button onclick="myFunc()">click here</button> 
 
    <div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
    </div> 
 
</body>

Quelle

2017-11-02 18:15:07

Sie können es kurz Format mit reinem JavaScript tun:

function myFunc() { 
    var y = document.getElementById("bg-change1"); 
    y.classList.toggle("active") 
}

Aber halten es die aktuelle CSS-Selektor brauchen, um must beachten Sie die '.active' Klasse zu geben, Vorrang vor '.normal'.

Quelle

2017-11-02 18:13:59 Hanif

vielleicht ist es besser, einen vollständigen Code hinzufügen, ihm zu zeigen;) –

seinen Code nichts Basierend muss sich ändern, wenn nur meine Funktion folgen das ist genug, um perfekt zu funktionieren. – Hanif

ich weiß, aber es wird Sie einfach antworten vollständiger –

getAttribute("class") gibt den Inhalt des Attributs im Moment Sie es nennen. Da dies eine Zeichenfolge ist, gibt es keinen Verweis auf das Element. Neuzuweisung y macht daher nichts. Um das Attribut tatsächlich zu ändern, können Sie setAttribute("class", "active") verwenden. Aber das ist keine gute Lösung, weil Sie nicht mehr als eine Klasse haben können und die normal Klasse unnötig ist.

Verwenden Sie einfach die Standardstile mit einem anderen Selektor (z. B. #bg-change1) und überschreiben Sie Eigenschaften, die Sie ändern möchten, im Selektor .active. Sie können dann mit document.getElementById("bg-change1").classList.toggle("active") zwischen den beiden "Modi" wechseln.

Quelle

2017-11-02 18:15:45

-1

Sie erhalten das Attribut erfolgreich, aber Sie ändern oder setzen es nie. Tun Sie das mit document.getElementById("bg-change1").setAttribute("class", y);

Beispiel:

function myFunc() { 
 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
 
    if (y === "normal") { 
 
    y = "active"; 
 
    } else { 
 
    y = "normal"; 
 
    } 
 
    document.getElementById("bg-change1").setAttribute("class", y); 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<button onclick="myFunc()">click here</button> 
 
<div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
</div>

Quelle

2017-11-02 18:17:01 j08691

Anonyme Feigling Downvoter Pflege zu kommentieren? Bitte tu uns allen einen Gefallen und wachse ein Paar und erkläre, was mit dieser Antwort nicht stimmt. – j08691

Hier können Sie Klasse in y und Ändern von Klassennamen abrufen, aber es zurück zu Element gesetzt doesnt.

stattdessen können Sie

function myFunc() { 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
    if (y === "normal") { 
    document.getElementById("bg-change1").classList.remove('normal'); 
    document.getElementById("bg-change1").classList.add('active'); 
    } else { 
    document.getElementById("bg-change1").classList.remove('active'); 
    document.getElementById("bg-change1").classList.add('normal'); 
    } 
}

Quelle

2017-11-02 18:18:22

Für ein kürzeres Format können Sie die Antwort von Hanif mit der Funktion .toggle verwenden –

verwenden, die ein bisschen wie ein runaround Weise ist eine Klasse hinzuzufügen und zu entfernen. Ich würde vorschlagen, die Toggle-Klasse Verfahren implementiert, siehe unten:


 
    
 
function myFunc() { 
 
    var y = document.getElementById("bg-change1"); 
 
    y.classList.toggle("active"); 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<body> 
 
    <button onclick="myFunc()">click here</button> 
 
    <div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
    </div> 
 
</body>

Quelle

2017-11-02 18:26:44 kawnah

Ich versuche, die Hintergrundfarbe mit JS zu wechseln

Antwort

Verwandte Themen