Integer in Javascript aufteilen

[af2111]

Hallo

Ich habe eine Seite, auf der man durch ein Eingabefeld die Hintergrundfarbe der Seite ändern kann.

Der Code dazu ist hier:

<input type="number" id="numbers" placeholder="Gib 6 Zahlen ein">
<button onclick="Eingabe()">Eingabe</button>

function Eingabe() {
var zahlen = document.getElementById("numbers").value;
var farbe = "#" + zahlen;

Dieser Code setzt mithilfe von RGB-Werten die Hintergrundfarbe auf die Werte, die man in das Eingabefeld eingegeben hat. Jetzt möchte ich die RGB-Werte in einzelne Variablen aufteilen, eine für Rot, eine für Grün und eine für Blau. Leider weiss ich nicht, wie man das macht. Kann mir da jemand helfen?

af2111

[pl]

Idee:

var H6 = 'F3ABC0';
console.log( H6.match(/\w\w/g) );
// Ergebnis: Array [ "F3", "AB", "C0" ]

MfG

[Matthias Apsel]

Hallo af2111,

number ist für dein Vorhaben der falsche Typ. FFABBB wäre eine gültige Farbangabe, number erlaubt aber nur Ziffern (und Minuszeichen und Dezimalpunkt).

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@af2111

<input type="number" id="numbers" placeholder="Gib 6 Zahlen ein">
<button onclick="Eingabe()">Eingabe</button>

Dem Eingabefeld fehlt eine Beschriftung. Placeholder sind kein Ersatz! – Wirklich nicht!

Aber wozu das? Für Farben gibt es <input type="color"/>.

Dieser Code setzt mithilfe von RGB-Werten

RGB ist für Menschen kein gut geeignetes Farbmodell. HSL oder HSB sind weitaus intuitiver.

LLAP 🖖

[beatovich]

hallo

RGB ist für Menschen kein gut geeignetes Farbmodell. HSL oder HSB sind weitaus intuitiver.

Aus dem Malermeister-Produktkatalog:

• "Magic Hue" 10 Liter
• "Magic Sättigung" 10 Liter
• "Magic Helligkeit" 10 Liter
• "Magic Transparenz" 10 Liter

[Gunnar Bittersmann]

@@beatovich

Aus dem Malermeister-Produktkatalog:

• "Magic Hue" 10 Liter
• "Magic Sättigung" 10 Liter
• "Magic Helligkeit" 10 Liter
• "Magic Transparenz" 10 Liter

Willst du damit irgendwas sagen?

LLAP 🖖

[beatovich]

Aus dem Malermeister-Produktkatalog:

• "Magic Hue" 10 Liter
• "Magic Sättigung" 10 Liter
• "Magic Helligkeit" 10 Liter
• "Magic Transparenz" 10 Liter

Willst du damit irgendwas sagen?

Ist das denn nicht intuitiv verständlich?

[Gunnar Bittersmann]

@@beatovich

Aus dem Malermeister-Produktkatalog:

• "Magic Hue" 10 Liter
• "Magic Sättigung" 10 Liter
• "Magic Helligkeit" 10 Liter
• "Magic Transparenz" 10 Liter

Willst du damit irgendwas sagen?

Ist das denn nicht intuitiv verständlich?

Wenn du das meinst, was ich verstehe, dann liegst du ziemlich daneben. Aber vielleicht verstehe ich das ja auch falsch. Also was wolltest du sagen?

LLAP 🖖

[beatovich]

hallo

@@beatovich

Aus dem Malermeister-Produktkatalog:

• "Magic Hue" 10 Liter
• "Magic Sättigung" 10 Liter
• "Magic Helligkeit" 10 Liter
• "Magic Transparenz" 10 Liter

Willst du damit irgendwas sagen?

Ist das denn nicht intuitiv verständlich?

Wenn du das meinst, was ich verstehe, dann liegst du ziemlich daneben. Aber vielleicht verstehe ich das ja auch falsch. Also was wolltest du sagen?

Was für einen Menschen intuitiv verständlich ist, weiss letztendlich nur er. Wer mit Farbmischen vertraut ist (und das sind wir in einem gewissen Masse alle) kann mit der Idee von Mischen von 3 Grundfarben durchaus umgehen.

Demgegenüber bezweifle ich, dass irgend jemand ohne Bildung irgend ein Verständnis von Hue hat.

[Gunnar Bittersmann]

@@beatovich

Demgegenüber bezweifle ich, dass irgend jemand ohne Bildung irgend ein Verständnis von Hue hat.

Wie ich vor einiger Zeit schrieb: Ans HSL-Modell muss man sich sicher erstmal gewöhnen. Das dauert ca. 5 Minuten.

S.a. diese Diskussion mit Dem Martin.

LLAP 🖖

[beatovich]

hallo

Wie ich vor einiger Zeit schrieb: Ans HSL-Modell muss man sich sicher erstmal gewöhnen. Das dauert ca. 5 Minuten.

Gut, dann sind wir uns ja einig, bis auf die 5 Minuten. Ein intuitiv verständliches Widget lässt sich nämlich ohne Modellverständnis sofort bedienen.

[Gunnar Bittersmann]

@@beatovich

Wie ich vor einiger Zeit schrieb: Ans HSL-Modell muss man sich sicher erstmal gewöhnen. Das dauert ca. 5 Minuten.

Gut, dann sind wir uns ja einig, bis auf die 5 Minuten.

Na gut, vielleicht etwas verschätzt. Ich gehe gern noch eins, zwei Minuten runter.

Ein intuitiv verständliches Widget lässt sich nämlich ohne Modellverständnis sofort bedienen.

Du kannst ja mal paar Runden What the color? spielen. Nach kurzer Eingewöhnungszeit solltest du mit dem HSL-Modell wesentlich einfacher die gesuchte Farbe finden.

LLAP 🖖

[Rolf B]

Hallo beatovich,

du weißt aber schon, dass Du da ein anderes Mischprinzip verwendest?

Lieber Bildschirm, hier ist ein Pfund Grün und ein Pfund Rot. Ahh, schönes Gelb.

Lieber Malermeister, misch mir doch ein Pfund Grün und ein Pfund Rot. Uugh, tiefbraune Pampe.

Wenn Du aber dem Malermeister sagst: Gib mir doch ein Pfund RAL 1026 Leuchtgelb (sozusagen den Hue) und misch das mit 3 Pfund RAL 9010 Reinweiß, dann hast Du noch die Sättigung hinzugefügt. Dann kommen noch 2 Pfund RAL 9005 Tiefschwarz hinzu und es gibt die Helligkeit. Oooookeh - Maler machen das ein bisschen anders, und mein Vergleich muss etwas hinken, aber ein HSB-System ist auch bei Malers durchaus üblich 😀

Rolf

[Gunnar Bittersmann]

@@beatovich

Demgegenüber bezweifle ich, dass irgend jemand ohne Bildung irgend ein Verständnis von Hue hat.

Das Argument ist so schwach, dass es beim ersten Lufthauch umfällt.

Jemand ohne Bildung hat noch weniger Verständnis von additiver Farbmischung aus Rot, Grün und Blau. Und darum ging es ja hier: der Vergleich von HSL- mit RGB-Model.

Der Farbwert (hue) hingegen ist schnell erklärt; der Regenbogen sollte ja bekannt sein. Farbwert geht von 0° bis 360°; 0° ist rot, dann geht’s über orange, gelb, grün, blau zu violett in die 300er hinein; über weinrot schließt sich der Kreis. Nichts, was man nicht innerhalb einer Minute begreifen könnte.

LLAP 🖖

[Gunnar Bittersmann]

@@beatovich

Aus dem Malermeister-Produktkatalog:

• "Magic Hue" 10 Liter
• "Magic Sättigung" 10 Liter
• "Magic Helligkeit" 10 Liter
• "Magic Transparenz" 10 Liter

Wenn du das meinst, was ich verstehe, dann liegst du ziemlich daneben. Aber vielleicht verstehe ich das ja auch falsch. Also was wolltest du sagen?

Wer mit Farbmischen vertraut ist …

Also liegst du doch ziemlich daneben. Der Maler (Drucker) mischt subtraktiv, das RGB-Modell (Bildschirm) additiv.

Wer ist mit Farbmischen vertraut? Ich würde mal sagen, dass die Antwort „Die Schweizer!“ hier nicht gilt. 😉

LLAP 🖖

[ursus contionabundo]

Naja. Das sind hexadezimale Zeichen und wenn Du RGB brauchst, dann willst Du wohl auch dezimale Zahlen haben... Mit ein wenig parseInt-Voodo und dem Wissen, dass die Elemente einer Zeichenkette wie die eines array geholt werden können, geht das:

<script>
function Eingabe() {
	
	
	var s = document.getElementById( "numbers" ).value.toUpperCase().replace( '#', '' );
	var re1 = /[0-9A-F]{6}/
	
	if ( re1.test( s ) )  {
	
		var red   = parseInt( '0x' + s[0] ) * 16 + parseInt( '0x' + s[1] );
		var green = parseInt( '0x' + s[2] ) * 16 + parseInt( '0x' + s[3] );
		var blue  = parseInt( '0x' + s[4] ) * 16 + parseInt( '0x' + s[5] );
		alert ( 'r=' + red + ' g=' + green + ' b=' + blue );
  } else {
	    alert ( 'Ups! Ungueltige Eingabe.' );	
	}
}
</script>

<input type="text" pattern='[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{6}' id="numbers" placeholder="hexcode, 6-stellig">
<button onclick='Eingabe()'>Klick</button>

[dedlfix]

Tach!

Mit ein wenig parseInt-Voodo

Warum Voodoo, wenn man die vorhandene Funktionalität nutzen kann?

	var s = document.getElementById( "numbers" ).value.toUpperCase().replace( '#', '' );
	var re1 = /[0-9A-F]{6}/
	
	if ( re1.test( s ) )  {
	
		var red   = parseInt( '0x' + s[0] ) * 16 + parseInt( '0x' + s[1] );

Die Umwandlung in Großschreibung ist nicht nötig, und die Stringakrobatik auch nicht. Für den Regexp-Test gibt es eine bessere Variante, die sich aus der einfacheren Verwendung von parseInt() ergibt. parseInt() kennt nämlich einen zweiten Parameter, der die Zahlenbasis angibt. Es reicht dann ein parseInt('a', 16). Wenn das Zeichen kein gültiges Hex-Zahlzeichen ist, kommt NaN raus. Daran kann man die Gültigkeit der Eingabe feststellen.

So lässt sich der Rotanteil ermitteln:

var red = parseInt(s.substr(0, 2), 16);

Der Rest kann ähnlich kurz notiert werden. Tests können à la isNaN(red) erfolgen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Warum Voodoo, wenn man die vorhandene Funktionalität nutzen kann?

Sag ich doch.

Die hier zu nutzende vorhandene Funktionalität hat nichts mit JavaScript zu tun.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die hier zu nutzende vorhandene Funktionalität hat nichts mit JavaScript zu tun.

Oder vielleicht doch‽ Dazu müsste man aber wissen, was hsl(6deg 82% 38%) mit den Farbwerten anstellen möchte.

LLAP 🖖

[ursus contionabundo]

Meinetwegen. Deine Lösung ist schlanker. Ich kann aber noch was nachlegen:

Zusammen mit der Regel, dass im CSS auch Angaben wie #fa6 erlaubt sind (und wie #ffaa66 behandelt werden) ergibt sich:

<script>
function Eingabe() {
	
	
	var s = document.getElementById( "numbers" ).replace( '#', '' );
	var re1 = /^[0-9A-F]{6}$/
	var re2 = /^[0-9A-F]{3}$/
	
	if ( re1.test( s ) )  {
	
		var red   = parseInt( s.substr(0,2), 16 );
		var green = parseInt( s.substr(2,2), 16 );
		var blue  = parseInt( s.substr(4,2), 16 );
		alert ('r=' + red + ' g=' + green + ' b=' + blue );

	} else if ( re2.test( s ) ){

		var red   = parseInt( s[0]+s[0], 16 );
		var green = parseInt( s[1]+s[1], 16 );
		var blue  = parseInt( s[2]+s[2], 16 );
		alert ('r=' + red + ' g=' + green + ' b=' + blue );		

  } else {
	    alert ( 'Ups. Ungueltige Eingabe' );	
	}
}
</script>

<input type="text" pattern='[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3}|#[0-9A-Fa-f]{3}' id="numbers" placeholder="hexcode, 6-stellig">
<button onclick='Eingabe()'>Klick</button>

[dedlfix]

Tach!

Zusammen mit der Regel, dass auch Angaben wie #fa6 erlaubt sind und wie #ffaa66 behandelt werden ergibt sich:

... eine unnötige Dopplung. Erstmal die Eingabe normalisieren, dann verarbeiten. Das gute alte EVA-Prinzip (Eingabe-Verarbeitung-Ausgabe). Wenn das erste Zeichen ein # ist, schneidet man es raus. Der Fall mit den 3 Zeichen war eigentlich nicht vorgesehen, aber gut. Das ist ein zweiter Test, bei dem vorab die Eingabe normalisiert werden kann, dann hat man nur noch eine Parse-Routine statt zwei.

if (s.length == 3) {
  s = s.split('').map(function(c) { return c + c; }).join('');
}

oder kürzer in modernem Javascript:

if (s.length == 3) {
  s = s.split('').map(c => c + c).join('');
}

Anzumerken wäre noch, dass bei komplett kaputter Eingabe, wie zu viel oder zu wenig oder ganz falschen Zeichen, ein RegExp-Test eleganter aussieht. Aber es stört auch nicht, den kaputten String an substr()+parseInt() weiterzugeben, denn das fängt die isNaN()-Prüfung auf.

Und noch eine Kleinigkeit:

function() {
  if ( ... )  {
    var red = ...;
  } else {
    var red = ...;
  }
}

var ist nicht let, was nur innerhalb der nächstäußeren Klammern gültig wäre. Eine einmal mit var deklarierte Variable wird schon beim Parsen erkannt und nicht erst zur Laufzeit. Das heißt, auch wenn die Verarbeitung in den else-Zweig geht, ist die Wirkung von var vorhanden, und es wird keine globale Variable angelegt. Das zweite var stört nicht weiter, wird aber bei der Code-Analyse als überflüssig angemeckert. Besser ist es in einem solchen Fall, ein

var red, green, blue;

vor dem if zu notieren. Oder in modernem Javascript let zu nehmen, denn red, green und blue sind hier Hilfsvariablen, die nur innerhalb der if/else-Klammern gelten. Das let muss dann aber logischerweise in beiden Zweigen notiert werden.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Anzumerken wäre noch, dass bei komplett kaputter Eingabe, wie zu viel oder zu wenig oder ganz falschen Zeichen

Anzumerken wäre noch, dass, wenn #663399FF und #639F nicht akzeptiert wird, nicht die Eingabe kaputt ist, sondern die Prüfung.

LLAP 🖖

[dedlfix]

Tach!

Anzumerken wäre noch, dass bei komplett kaputter Eingabe, wie zu viel oder zu wenig oder ganz falschen Zeichen

Anzumerken wäre noch, dass, wenn #663399FF und #639F nicht akzeptiert wird, nicht die Eingabe kaputt ist, sondern die Prüfung.

Oder die Aufgabenstellung nicht genau genug war. Oder die Überlegung, was erlaubte Werte sind. Man lernt sowas auch ganz gut, wenn man es zu einfach implementiert hat und dann die unberücksichtigten Konstellationen zuschlagen.

Vielleicht sollte das aber auch nur eine Fingerübung für Javascript sein, und dass dabei nicht alle Fälle abgehandelt werden, ist nicht weiter tragisch.

dedlfix.

[af2111]

Danke für die Tipps

Ich habe das Problem jetzt auf einem anderen Weg gelöst

Der Code:

function Eingabe() {
var zahlen = document.getElementById("text").value;
var farbe = "#" + zahlen;

R = hexToR(farbe);
G = hexToG(farbe);
B = hexToB(farbe);

function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

var R = hexToR(farbe);
var G = hexToG(farbe);
var B = hexToB(farbe);

   function Brightness(r, g, b)
    {
       return Math.sqrt(
          R * R * .241 + 
          G * G * .691 + 
          B * B * .068);
    }
var Helligkeit = Brightness();


if(Helligkeit > 130) {
    document.body.style.color = "black";
}
else{

    document.body.style.color = "white";

}
document.body.style.backgroundColor = farbe;
}

Trotzdem danke für alle Tipps

[Matthias Apsel]

Hallo af2111,

Ich habe das Problem jetzt auf einem anderen Weg gelöst

Falls es keine Übungsaufgabe war: Was spricht gegen <input type="color">?

Bis demnächst
Matthias

[ursus contionabundo]

Was spricht gegen <input type="color">?

Insgesamt ~10% "iOS Safari" - Nutzer?

[Gunnar Bittersmann]

@@ursus contionabundo

Was spricht gegen <input type="color">?

Insgesamt ~10% "iOS Safari" - Nutzer?

Nein.

Progressive enhancement heißt das Zauberwort.

LLAP 🖖

[af2111]

Falls es keine Übungsaufgabe war: Was spricht gegen <input type="color">?

War eine Übungsaufgabe. Ich wollte die Textfarbe abhängig von der Helligkeit der Hintergrundfarbe Schwarz oder Weiß erscheinen lassen

af2111

[Gunnar Bittersmann]

@@af2111

Ich wollte die Textfarbe abhängig von der Helligkeit der Hintergrundfarbe Schwarz oder Weiß erscheinen lassen

Dazu braucht man kein JavaScript. Guckst du.

Einfach mit background-color rumspielen (hier besonders interessant: der Helligkeitswert, also der 3. Parameter der hsl()-Funktion).

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Funkt in FF, funkt bei mir nicht in Chrome 68/69 (weiß nicht was ich gerade genau habe, der hat sich geupdated und muss erstmal neu starten).

Der invert-Effekt in Chrome funktioniert bei color:white, aber nicht bei color:transparent. Offenbar schmeißt FF bei invert oder grayscale die Transparenz weg, Chrome aber nicht. Ein opacity-Filter hat es auch nicht geheilt.

Rolf

[ursus contionabundo]

Funkt in FF, funkt bei mir nicht in Chrome 68/69

Im Chrome-Browser, "Version 70.0.3538.67 (Offizieller Build) Built on Ubuntu , running on Ubuntu 18.04 (64-Bit)" tut es.

[Rolf B]

Hallo ursus,

ich habe dem <p> einen weißen Rahmen gegeben. Den sehe ich - in schwarz natürlich, wegen des invert. Aber in dem Rahmen ist nur die Hintergrundfarbe.

:-(
Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Guckst du.

Einfach mit background-color rumspielen (hier besonders interessant: der Helligkeitswert, also der 3. Parameter der hsl()-Funktion).

Beim Rumspielen mit dem L-Wert fällt dann auf, dass Browser nicht abrupt zwischen Schwarz und Weiß umschalten, sondern shades of grey dazwischen liegen. Nun nicht 50, aber so 5 bis 10 – was zu völlig unzureichendem Farbkontrast führt. Die Methode ist (evtl.?) für dunkle und helle Hintergrundfarben geeignet, aber nicht für solche in der Mitte.

LLAP 🖖

[pl]

Warum so kompliziert? parseInt() kann auch mit Basis 16 rechnen:

var H6 = 'F3ABC0';
var za = H6.match(/\w\w/g);    // gibt array
za.forEach(function(v,i){
    var dezi = parseInt(v,16); // Basis 16
    console.log(dezi);
});

MfG