Farbänderung durch Hex Code

Nati13

Mitglied
Hallo zusammen,
ich hab hier eine Aufgabe und scheitere gerade kläglich. Hab ihr irgendwelche Tipps und könntet mir bitte helfen? Finde zu dem Thema leider nichts, oder gebe einfach die falschen Suchbegriffe ein?
Hier die Aufgabe: Erstellt eine Webseite mit einem div und einem Formularfeld. In dem Formularfeld kann man eine Farbe in Hexadezimal Code eingeben. Verliert das Formularfeld den Fokus, soll die Schriftfarbe des div auf die eingegebene Farbe wechseln. Davor soll die Eingabe auf Korrektheit geprüft werden (erstes Zeichen ist ein # und sechs Stellen).
Wenn ihr mir da irgendwie helfen könntet. Vielen Dank.
Das wär mein Code soweit:
HTML:
<body>

<form name="form">
    <input type="text" id = "blur" name="farben" onblur="blur1()"> <!-- event -->
</form>
<div id="color">Farbenauswahl - Farbwechsel</div>

<script>

    let c1 = document.querySelector('#blur');
    p = c1.addEventListener('blur', blur1);
    function blur1() {
        if (input.length == 7 && input <1 == #) {
            document.getElementsByTagName("body")[0].style.backgroundColor=document.form.farben.value;
        }

    }
</script>

</body>
</html>
 

mihe7

Top Contributor
Müsste etwa so funktionieren:
Javascript:
c1.addEventListener('blur', function(e) {
    let text = e.target.value;
    if (text.matches(/#[0-9a-fA-F]{6}/)) {
        document.querySelector("body").style.backgroundColor=text
    }
});
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
N Formularinhalt in Tabelle durch Button hinzufügen Angular, React, JQuery - Fragen zu JavaScript 4
R Suche Möglichkeit eine ID durch Dateiendung zu ergänzen [location.href / getElementById ] Angular, React, JQuery - Fragen zu JavaScript 4
V Eingaben nach submit durch function erhalten Angular, React, JQuery - Fragen zu JavaScript 6
J Link durch java ersetzen Angular, React, JQuery - Fragen zu JavaScript 2
F Laufzeitfehler durch Hochkomma in Variable Angular, React, JQuery - Fragen zu JavaScript 5
thor_norsk TypeScript Code in Java Script zu konvertieren. Angular, React, JQuery - Fragen zu JavaScript 2
H Code in Chrome löschen Angular, React, JQuery - Fragen zu JavaScript 2
D NodeJS bzw. Javacript Code öffnen (im Browser) Angular, React, JQuery - Fragen zu JavaScript 26
J Welche Bedeutung hat Code außerhalb von Funktionen Angular, React, JQuery - Fragen zu JavaScript 3
T Wie kann man den code hier abändern, damit es "Array-werte" einliest und nicht Excelwerte? Angular, React, JQuery - Fragen zu JavaScript 2
N Kann mir wer helfen, den Code zu erklären Angular, React, JQuery - Fragen zu JavaScript 3
thowe bestehenden Code erwarten Angular, React, JQuery - Fragen zu JavaScript 6
C In Wordpress unter Custom-Js mit Javascript den ursprünglichen Code deaktivieren Angular, React, JQuery - Fragen zu JavaScript 0
T html code per javascript einfügen Angular, React, JQuery - Fragen zu JavaScript 7
R Java Code Hilfe Angular, React, JQuery - Fragen zu JavaScript 16
S Frage zum Code Angular, React, JQuery - Fragen zu JavaScript 2
N bb code Angular, React, JQuery - Fragen zu JavaScript 3
D wie integriere ich ein java-sript in einen htm-code? Angular, React, JQuery - Fragen zu JavaScript 2
M habe java code aber etwas funktioniert nicht Angular, React, JQuery - Fragen zu JavaScript 2
S java code positionieren Angular, React, JQuery - Fragen zu JavaScript 2
M Warum funktioniert der Code nur einmal im Frame? Angular, React, JQuery - Fragen zu JavaScript 2
F Frage zu Code Angular, React, JQuery - Fragen zu JavaScript 11
F Anfängerfrage zu Code Angular, React, JQuery - Fragen zu JavaScript 2
F Ich verstehe den Code nicht? Angular, React, JQuery - Fragen zu JavaScript 6

Ähnliche Java Themen

Neue Themen


Oben