tag:forum.selfhtml.org,2005:/selfFormular bei onchange aktualisieren, aber wie? – SELFHTML-Forum2019-06-11T12:51:08Zhttps://forum.selfhtml.org/self/2019/jun/9/formular-bei-onchange-aktualisieren-aber-wie/1750134#m1750134Matthias Scharwiesmscharwies@selfhtml.org2019-06-09T14:27:31Z2019-06-09T14:27:31ZFormular bei onchange aktualisieren, aber wie?<p>Servus!</p>
<p>Ich möchte in den Ferien für die <a href="https://wiki.selfhtml.org/wiki/Helferlein" rel="nofollow noopener noreferrer">Helferlein</a> einen Allround-Farbwähler mit Kontrast-Checker bauen.</p>
<p>Bis jetzt habe ich mehrere, parallele input-Felder:</p>
<ul>
<li>Hex</li>
<li><code><input type="color"></code></li>
<li>sowie je 3 Schieberegler und <code><input type="number" min="0" max="255"></code> für die RGB-Werte</li>
</ul>
<p>Wenn ich ein Feld durch eine Eingabe verändere, sollen/müssen die anderen ja aktualisiert werden.</p>
<p><strong>Wie soll ich da vorgehen?</strong></p>
<p>Ich würde bis jetzt mit <code>Event.target</code>rausfinden, wo das change-Event herkommt und dann erst diese Gruppe und dann alle anderen berechnen. Das würde ich mit vielen ifs versuchen.</p>
<p>Habt ihr da einen Königsweg?</p>
<p>Oder soll ich es viel einfacher machen und wie <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/input/Farbw%C3%A4hler#Farbw.C3.A4hler" rel="nofollow noopener noreferrer">bei diesem HTML5-Farbwähler</a> nur <code><input type="color"></code> und den Hex-Code verwenden? Bei dem browsereigenen Farbwähler (alle außer IE9-11) könnte man sowohl die RGB- als auch HSL-Werte als Zahlen eingeben.</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
<em>"I don’t make typos. I make new words."</em>
</div>
https://forum.selfhtml.org/self/2019/jun/9/formular-bei-onchange-aktualisieren-aber-wie/1750135#m1750135Lisa2019-06-09T14:32:03Z2019-06-09T14:32:03ZFormular bei onchange aktualisieren, aber wie?<p>Hallo,</p>
<p>vielleicht findest du <a href="https://www.w3schools.com/colors/colors_picker.asp" rel="nofollow noopener noreferrer">hier einige Anregungen</a>, wobei ich das schon ziemlich gut finde aber sowas im eigenen Bestand, also hier, wäre natürlich besser.</p>
<p>lg.</p>
https://forum.selfhtml.org/self/2019/jun/9/formular-bei-onchange-aktualisieren-aber-wie/1750136#m1750136dedlfix2019-06-09T14:35:52Z2019-06-09T14:35:52ZFormular bei onchange aktualisieren, aber wie?<p>Tach!</p>
<blockquote>
<p>Wenn ich ein Feld durch eine Eingabe verändere, sollen/müssen die anderen ja aktualisiert werden.</p>
<p><strong>Wie soll ich da vorgehen?</strong></p>
<p>Ich würde bis jetzt mit <code>Event.target</code>rausfinden, wo das change-Event herkommt und dann erst diese Gruppe und dann alle anderen berechnen. Das würde ich mit vielen ifs versuchen.</p>
</blockquote>
<p>Ein if sollte reichen. Du willst ja alle außer einem bearbeiten, da bietet sich ein forEach() über die NodeList der Elemente an, und das eine wird ausgeklammert oder bekommt eine Sonderbehandlung.</p>
<p>dedlfix.</p>
https://forum.selfhtml.org/self/2019/jun/9/formular-bei-onchange-aktualisieren-aber-wie/1750256#m1750256Felix Riestererhttps://felix-riesterer.de2019-06-11T12:51:08Z2019-06-11T12:51:08ZFormular bei onchange aktualisieren, aber wie?<p>Lieber Matthias,</p>
<p>Pseudocode:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> targetInput <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token operator">||</span> event<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>input <span class="token operator">!=</span> targetInput<span class="token punctuation">)</span> <span class="token punctuation">{</span>
input<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token function">umgerechneterWertAus</span><span class="token punctuation">(</span>targetInput<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2019/jun/9/formular-bei-onchange-aktualisieren-aber-wie/1750137#m1750137Matthias Scharwiesmscharwies@selfhtml.org2019-06-09T14:42:21Z2019-06-09T15:15:29ZFormular bei onchange aktualisieren, aber wie?<p>Servus!</p>
<blockquote>
<p>Hallo,</p>
<p>vielleicht findest du <a href="https://www.w3schools.com/colors/colors_picker.asp" rel="nofollow noopener noreferrer">hier einige Anregungen</a>, wobei ich das schon ziemlich gut finde</p>
</blockquote>
<p>Ja, gut sind</p>
<ul>
<li>die Hexagon-Farbpalette und dass man</li>
<li>nicht nur Hex-Codes sondern auch <strong>Farbnamen</strong> eingeben kann</li>
<li>die Übersicht über die <strong>HSL-Farbtöne</strong></li>
</ul>
<p>Ich will etwas mit 2 Farben, aus denen dann direkt der Kontrast berechnet wird.</p>
<p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> hatte <a href="https://forum.selfhtml.org/meta/2018/sep/14/helferlein-oder-hilfsmittel/1731950#m1731950" rel="noopener noreferrer">vor einem Jahr vorgeschlagen</a>, auch HSL zu integrieren.</p>
<blockquote>
<p>aber sowas im eigenen Bestand, also hier, wäre natürlich besser.</p>
</blockquote>
<p>Genau, muss man mal wieder machen. Unsere <a href="https://wiki.selfhtml.org/wiki/Helferlein" rel="nofollow noopener noreferrer">Helferlein</a> sind ganz arm, da müssen wir mal drüber.</p>
<p>Meine Ideen:</p>
<ul>
<li>Contrast Checker</li>
<li>URL-Encoder für SVG (bes. wichtig für CSS-background-images)</li>
</ul>
<p>Habt ihr noch Wünsche?</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
<em>"I don’t make typos. I make new words."</em>
</div>
https://forum.selfhtml.org/self/2019/jun/9/formular-bei-onchange-aktualisieren-aber-wie/1750139#m1750139Matthias Scharwiesmscharwies@selfhtml.org2019-06-09T15:21:06Z2019-06-09T15:21:06ZFormular bei onchange aktualisieren, aber wie?<p>Servus!</p>
<blockquote>
<blockquote>
<p><strong>Wie soll ich da vorgehen?</strong></p>
<p>Das würde ich mit vielen ifs versuchen.</p>
</blockquote>
<p>Ein if sollte reichen. Du willst ja alle außer einem bearbeiten, da bietet sich ein forEach() über die NodeList der Elemente an, und das eine wird ausgeklammert oder bekommt eine Sonderbehandlung.</p>
</blockquote>
<p>Danke!</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<p>PS: Zwei Möglichkeiten, das normale input-Feld sowohl für HEX als auch Farbnamen zu verwenden:</p>
<p>SO: <a href="https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes" rel="noopener noreferrer">Javascript function to convert color names to hex codes</a></p>
<div class="signature">-- <br>
<em>"I don’t make typos. I make new words."</em>
</div>