farbpalettet

dann soll sich nicht nur die Buttonfarbe ändern sondern auch SOFORT die Farbe für die Überschriften oder die Texte. Ich glaube, das geht irgendwie mit addEventListener und change ???
Zum Vergrößern anklicken....
Ganz genau. Ich zeige dir mal, wie es für die Überschriften geht, dann kannst Du es für die Texte leicht ergänzen
Code: 
<!DOCTYPE html>
<html>

<head></head>

<body>
    <h2>Überschriften</h2>
    <h2>test</h2>
    <p>Beispiel: Vorschau </p>
    <p>Das ist der Rest Text</p>

    Wähle Farbe Überschriften : <input type="color" name="color1" id="color1" value="#ff0000"><br /><br />
    Wähle Farbe Text : <input type="color" name="color2" id="color2"><br /><br />

    <script>
        document.getElementById('color1').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("h2").forEach(function (h2) {
                h2.style.color = col;
            });
        });
    </script>

</body>

</html>
2.Ich möchte die Farbe für die buttons voreinstellen können. Jetzt kommen sie in schwarz .
Zum Vergrößern anklicken....
Das geht sehr einfach, indem Du einfach das value-Attribut setzt, siehe das HTML oben.

3. die Labels sollen auch doe Farbe der Überschriften / Texte bekommen
Zum Vergrößern anklicken....
Dazu musst Du sie in einem Container einbetten, und zwar das Label-Tag. Dann kannst die Farbe in dem selben Eventlistener ebenfalls ändern.
 
1 und 2 erledigt.

komme nicht weiter mit Label color Anfangsfarbe und Farbänedrung klar. Habe es in ein div eingestellt, Farbe ändert sich nicht.
Anfangsfarbe identisch
Code: 
<!DOCTYPE html>
<html>
<head></head>
<body>
    <h2>Überschriften</h2>
    <h2>test</h2>
    <p>Beispiel: Vorschau </p>
    <p>Das ist der Rest Text</p>
    <div>
            <label for="color1">           
             Hier waehle Farbe Überschriften
            </label>
    </div>
    

    <input type="color" name="color1" id="color1" value="#ff0000"><br /><br />
    Wähle Farbe Text : <input type="color" name="color2" id="color2" value="#ff0000"><br /><br />

    <script>
        
        document.getElementById('color1').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("h2").forEach(function (h2) {
            h2.style.color = col;

            document.getElementsByTagName("div").style.color = col;   
            });
        });

        document.getElementById('color2').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("p").forEach(function (p) {
            p.style.color = col;
            });
        });

    </script>

</body>
</html>
?



.
 
Das div brauchst Du gar nicht. So funktioniert es:
Code: 
<!DOCTYPE html>
<html>

<head></head>

<body>
    <h2>Überschriften</h2>
    <h2>test</h2>
    <p>Beispiel: Vorschau </p>
    <p>Das ist der Rest Text</p>
    <label for="color1">
        Hier waehle Farbe Überschriften
    </label>
    <input type="color" name="color1" id="color1" value="#ff0000"><br /><br />
    Wähle Farbe Text : <input type="color" name="color2" id="color2"><br /><br />

    <script>
        document.getElementById('color1').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("h2").forEach(function (h2) {
                h2.style.color = col;
            });
            document.querySelector("label[for='color1']").style.color = col;
        });
    </script>

</body>

</html>
 
Dein Code für das div sieht so aus:
document.getElementsByTagName("div").style.color = col;
getElementsByTagName liefert eine Nodelist zurück, aus der Du mit einem Index das richtige Element auswählen müsstest:
document.getElementsByTagName("div")[0].style.color = col;
Da es i. allg. mehrere divs auf der Seite gibt, ist das nicht so wirklich praktikabel. Mit querySelector (ohne All) bekommst Du jedoch genau ein Element und brauchst weder einen Index noch eine Schleife.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück