tag:forum.selfhtml.org,2005:/self Slider to JS variable – SELFHTML-Forum 2023-03-22T17:21:00Z https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807082#m1807082 Alois al.bachmeier@live.de 2023-03-17T07:05:52Z 2023-03-17T07:43:41Z Slider to JS variable <p>Hi all, Mein Problem: Ich versuche einen Slider-Wert in ein JS-Variable (strOut[0]) zu bringen, um den Wert dort weiter zu verarbeiten .... aber das geling nicht. Ich bitte um Hilfe!</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Slider to JS-Var<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>Xout</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>Xout2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lable</span><span class="token punctuation">></span></span>Fußpunkt:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lable</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lable</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lable</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> °C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lable</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> strOut<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> sliderFp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input[type='range'][id='fpIn']"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> sliderFp<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 punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</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> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Xout"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">">>> "</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Xout2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807083#m1807083 Rolf B 2023-03-17T08:54:56Z 2023-03-17T08:54:56Z Slider to JS variable <p>Hallo Alois,</p> <p>Die Zuweisung an strOut[0] funktioniert prima.</p> <p>Was nicht funktioniert - was Du erkennen würdest, wenn Du mal die Entwicklerwerkzeuge des Browsers aufmachst, einen Breakpoint bei der Zuweisung setzt und dann schrittweise weiterläufst - ist die Zuweisung an das innerHTML eines Elements mit der ID test2. Denn dieses Element gibt's nicht.</p> <p>Damit möchtest Du an die Eigenschaft innerHTML von <code>null</code> etwas zuweisen, und das bricht dein Script ab.</p> <p>Wenn es Dir darum geht, dass beim ersten Aufruf der Seite die Zuweisung von strOut[0] an das Xout2 Element keinen Effekt hat - das liegt daran, dass zu diesem Zeitpunkt noch nichts an strOut[0] zugewiesen ist. Das passiert erst, wenn das erste change-Element ausgelöst wird. D.h. du musst beim Seitenstart - außerhalb des Eventhandlers - den Sliderwert einmalig ins Ausgabeelement übertragen.</p> <p>Weitere Hinweise:</p> <ul> <li>Das lable Element gibt's nicht. Ein label ist ein label, egal ob amerikanisches oder britisches Englisch</li> <li><code>document.querySelector("input[type='range'][id='fpIn']")</code> - kann man machen, ist aber unnötig kompliziert. Eine ID muss im HTML Dokument eindeutig sein, und deshalb kannst Du hier auch <code>document.querySelector("#fpIn")</code> oder <code>document.getElementById("fpIn")</code> verwenden. Achte auf die Verwendung des # Zeichens. In querySelector muss es hinein, weil dort ein CSS Selektor verwendet wird und darin werden IDs mit einem # markiert.</li> <li>Nicht jedes Textelement ist ein Label. Manchmal ist es auch einfach ein <span> oder <div> - oder in deinem Fall ein <output> Element, wenn Du dorthin Werte ausgibst.</li> <li>Ein Label beschriftet ein Eingabeelement. Damit das funktioniert, benötigt das Eingabeelement eine ID und diese ID muss im for-Attribut des Labels angegeben werden. Beispiel folgt.</li> <li>Die Verwendung von strong oder b nur für den Zweck, Fettschrift zu erzeugen, ist falsch. Diese beiden Elemente tragen eine inhaltliche Aussage ("Semantik") und bei Dir liegt weder die Semantik für <b> (<em>bring attention to element</em>) noch für <strong> (strong importance) vor. Ja, ich weiß, <b> wurde früher als "bold" verstanden. Aber das ist aus der Zeit von HTML 3.2. Wenn es Dir nur um Fettschrift geht, ist CSS angesagt.</li> <li>Die Eigenschaft innerHTML dient dazu, einem Containerelement eine neue, innere HTML Struktur zuzuweisen, also Text mit HTML Markup darin. Um einfache Textausgaben zu machen, ist es ungeeignet. Mit etwas Pech enthält der normale Text Zeichen, die wie HTML Markup aussehen, und es zerreißt einem das Layout. Für normale Textausgaben verwendet man heute die textContent Eigenschaft.</li> <li>Die Seitenüberschrift sollte h1 sein, nicht h2. Wenn Dir die Schrift dafür zu groß ist, stelle mit CSS eine andere ein.</li> <li>Die Angabe °C gehört nicht in ein Label. Es ist zwar eine Form von Beschriftung, aber keine, die eine Aussage über die Bedeutung des beschrifteten Elements macht. Ich überlege sogar, ob die Zahlenwertdarstellung des Sliders vor Assistenztechniken (die auf ein Label angewiesen sind) verborgen werden müsste (mit dem Attribut aria-hidden="true"), denn ein Screenreader dürfte den Wert des Sliders ohnehin ansagen. Und dafür ist dann die Beschriftung "Fußpunkt" auch nicht hinreichend, da muss mehr Erklärung hinzu. Da Du hier aber, wie es aussieht, eine Beispielseite baust, gibt es zu wenig Kontext, um die richtige Einbindung von Assistenztechniken diskutieren zu können. Das ist leider die Crux im Web - du baust deine Seiten nicht nur für einen sehenden User mit zwei funktionierenden Händen, der vor einem Desktop-Monitor sitzt. Eine zugängliche Seite berücksichtigt auch Menschen, die blind sind, und beachtet auch Touchscreen, Tastatur und Spracheingabehelfer als Eingabe. Die Browser nehmen Dir dafür schon viel ab. Aber ein paar Dinge gilt es trotzdem zu beachten. Das macht die Sache leider komplexer und die meisten Beispiele im Web ignorieren das.</li> </ul> <p>Als Minimalbeispiel würde ich das so bauen:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">label[for=fpIn]</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Slider to JS-Var<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fußpunkt:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> °C <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> sliderFp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fpIn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> sliderOut <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fpIn + output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> sliderFp<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> sliderOut<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> sliderOut<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>Die Debug-Zeile mit >>> und Temperatur habe ich weggenommen. Wenn Du die haben willst, kannst Du das ">>>" auch im HTML notieren.</li> <li>Das °C braucht kein Element, worin es steht</li> <li>Den Fettsatz für Fußpunkt erfolgt über eine CSS Regel, im style-Element. Ich identifiziere das richtige Label über sein for-Attribut.</li> <li>Für das Ausgabeelement für den Temperaturwert habe ich das output Element verwendet. Um es im DOM zu finden, verwende ich den Nachbar-Kombinator +. Der Selektor <code>#fpIn + output</code> findet ein output-Element, das direkt auf ein Element mit ID fpIn folgt.</li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807087#m1807087 Robert B. 2023-03-17T09:34:47Z 2023-03-17T09:34:47Z Slider to JS variable <p>Moin Alois,</p> <blockquote> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das Gradzeichen <code>°</code> ist außerhalb des ASCII-Zeichensatzes, weshalb es sinnvoll sein kann, im <code>head</code> die Codierung deines Dokuments anzugeben. Default ist in HTML <em>ISO-8859-1</em>.</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Slider to JS-Var<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>Xout</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>Xout2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Die Hauptüberschrift eines Dokuments sollte immer <code>h1</code> sein und <code>label</code> ohne zugeordnete Formularelemente wirken auf mich falsch (siehe auch <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/label" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/HTML/Elemente/label</a>).</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Zeilenumbrüche sind keine Spacing-Elemente.</p> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das <code>strong</code> hat kein End-Tag und umschließt auch das Input.</p> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lable</span><span class="token punctuation">></span></span>Fußpunkt:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lable</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lable</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lable</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> °C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lable</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das Element heißt <code>label</code> und nicht <code>lable</code> und <em>beschreibt</em> das Formularelement – so <a href="https://forum.selfhtml.org/m1807083" rel="noopener noreferrer">wie Rolf vorgeschlagen hat</a> – oder in der Form</p> <pre><code class="block good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Fußpunkt: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span><span class="token entity" title="&#x202f;">&#x202f;</span>°C <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p>Das Zeichen mit dem Unicode-Point <code>202f</code> ist ein <em>schmales geschütztes Leerzeichen</em>, wie es zwischen Zahlen und Einheiten verwendet wird.</p> <blockquote> <pre><code class="block language-js"><span class="token keyword">const</span> strOut<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> sliderFp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input[type='range'][id='fpIn']"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Das Objekt kann doch auch <code>const</code> sein – und es wird ziemlich kompliziert ermittelt: <code>"#fpIn"</code> sollte vollkommen ausreichen, da die ID eindeutig sein muss, es darf also keine weiteren Elemente mit dieser ID geben.</p> <blockquote> <pre><code class="block bad language-js"> sliderFp<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 punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</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> </blockquote> <p>Neben dem <code>change</code>-Event träfe auch das <code>input</code>-Event zu. Aber das eigentliche Problem an der Stelle ist, dass es kein Element mit der ID <code>test1</code> gibt. (Und <code>getElementById</code> kannst du natürlich auch anstelle von <code>querySelector("#…")</code> verwenden.)</p> <blockquote> <pre><code class="block bad language-js"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Xout"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">">>> "</span><span class="token punctuation">;</span> </code></pre> <pre><code class="block language-js"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Xout2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Das steht <em>außerhalb</em> des Event-Handlers, wird also <em>nur einmal beim Abarbeiten des JavaScript-Codes ausgeführt</em>. Und nach meinem Verständnis sollte man <code>innerHTML</code> gültigen HTML-Code zuweisen, dafür müsstest du doch die spitzen Klammern kontextgerecht behandeln. Aber in deinem Fall reichte auch die <code>textContent</code>-Eigenschaft vollkommen aus.</p> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807128#m1807128 Felix Riesterer https://felix-riesterer.de 2023-03-18T20:48:36Z 2023-03-18T20:48:36Z Slider to JS variable <p>Lieber Alois,</p> <blockquote> <p>Mein Problem: Ich versuche einen Slider-Wert in ein JS-Variable (strOut[0]) zu bringen, um den Wert dort weiter zu verarbeiten ...</p> </blockquote> <p>nein, das ist nicht Dein Problem. Diese Deine Worte sind die sprichwörtliche „Story vom Pferd“, denn was Du wirklich zu lösen versuchst, ist in der Tat <a href="https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807110#m1807110" rel="noopener noreferrer">etwas ganz anderes</a>:</p> <blockquote> <p>Ich will die Werte mehrerer Slider in einem String zusammen fassen und an den Server schicken.</p> </blockquote> <p>Also! Dann lass uns doch genau darüber reden, und nicht über Deine konfuse Beschreibung eines Detailproblems, das auf einer falschen Grundannahme beruht.</p> <p>Du willst einen Button manuell auslösen, um den aktuellen Zustand von allen Deinen Slidern in Form eines Strings zusammenzufassen. Dazu registrierst Du einen EventListener auf genau diesem Button:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>update-server<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sliderzustände an Server melden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token operator">...</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>In das Script kommt nun folgendes:</p> <pre><code class="block language-js">document <span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"update-server"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> myString <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// alle Slider finden</span> document <span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'input[type="range"]'</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 parameter">slider</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// String mit Slider-Wert erweitern</span> myString<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>slider<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">"="</span> <span class="token operator">+</span> slider<span class="token punctuation">.</span>value<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 comment">// POSTe alle Teilstrings in `myString` an den Server</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Die EventListener für Änderungen an den Slidern haben mit Deinem an-den-Server-senden nichts zu tun. Sie zeigen nur den jeweiligen Slider-Wert in einem passenden HTML-Element an, damit man das genauer sehen kann. Konzentrieren wir uns also besser überhaupt nicht darauf, sondern nur auf das Auslesen von allen Slidern auf einen Knopfdruck hin.</p> <p>Zum besseren Verständnis des Codes:</p> <ul> <li><code class="language-javascript"><span class="token parameter">variable</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span></code> ist eine modernere Schreibweise für <code class="language-javascript"><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">variable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span></code> (siehe auch <a href="https://wiki.selfhtml.org/wiki/JavaScript/Funktion#Lambda-Ausdruck_.28oder_Pfeilfunktion.29" rel="nofollow noopener noreferrer">Pfeilfunktion</a>)</li> <li>Um ein HTML-Element anhand einer bestimmten Eigenschaft (wie z.B. einem Attributwert wie hier das <code>type</code>-Attribut) auszuwählen, verwendet man die <code class="language-javascript">document</code>-Methode <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/ParentNode/querySelector" rel="nofollow noopener noreferrer"><code class="language-javascript">querySelector</code></a>. Will man alle Elemente mit dieser Eigenschaft erhalten, verwendet man <code class="language-javascript">document<span class="token punctuation">.</span>querySelectorAll</code>. Als Parameter übergibt man <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren" rel="nofollow noopener noreferrer">einen Selektor, wie er auch bei CSS verwendet wird</a>.</li> <li>Die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/forEach" rel="nofollow noopener noreferrer"><code>forEach</code>-Methode</a> ist nicht nur bei Array-Objekten verfügbar, sondern auch bei dem Objekt, welches von <code class="language-javascript">document<span class="token punctuation">.</span>querySelectorAll</code> zurückgegeben wird. Damit kann man die gefundenen HTML-Elemente der Reihe nach ansprechen. Dazu will <code class="language-javascript">forEach</code> aber eine Funktion als Parameter haben, in der geregelt wird, wie mit dem jeweiligen Element (hier in der Variable <code>slider</code> übergeben) verfahren werden soll.</li> </ul> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807283#m1807283 Alois 2023-03-22T15:37:03Z 2023-03-22T15:37:03Z Slider to JS variable <p>So klappt das jetzt! Zur Demo sende ich Slider-Werte nicht an den Server sondern gebe sie auf der HTML-Seite aus. Den "Durchbruch" hat das Script-Teil //Slider to String gebracht!</p> <p>Vielen Dank nochmal an alle Helfer und vorallem die GEDULD die ihr aufgebracht habt!</p> <p>Grüße Alois</p> <pre><code class="block"><!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> label {font-weight:bold;} output {font-weight:bold;text-align: center;} input {text-align: center;} .slidecontainer { width: 300px; margin-left: auto !important; margin-right: auto !important;} </style> </head> <body> <div class=slidecontainer> <p><strong>Fußpunkt:<strong></p> <input type="range" id="fpIn" min="-20" max="0" value="-15"> <output></output> °C <hr><br> <p><strong>Steigung:<strong></p> <input type="range" id="stIn" min="-.8" max="-.2" value="-0.5" step="0.01"> <output aria-hidden="true"></output> R/A<hr><br> <p><strong>von Wind:<strong></p> <input type="range" id="wiIn" min="0" max="6" value="2" step="0.5"> <output aria-hidden="true"></output> %<hr><br> <p><strong>von Licht:<strong></p> <input type="range" id="liIn" min="0" max="6" value="3" step="0.5"> <output aria-hidden="true"></output> %<hr><br> <button id="update-server">Werte senden</button> <output id=Out></output> </div> <script> // Slider --------------------------------------------------------- const sliderFp = document.querySelector("#fpIn"); const sliderFpOut = document.querySelector("#fpIn + output"); sliderFp.addEventListener("input", function() { sliderFpOut.textContent = sliderFp.value; }); sliderFpOut.textContent = sliderFp.value; const sliderSt = document.querySelector("#stIn"); const sliderStOut = document.querySelector("#stIn + output"); sliderSt.addEventListener("input", function() { sliderStOut.textContent = sliderSt.value; }); sliderStOut.textContent = sliderSt.value; const sliderWi = document.querySelector("#wiIn"); const sliderWiOut = document.querySelector("#wiIn + output"); sliderWi.addEventListener("input", function() { sliderWiOut.textContent = sliderWi.value; }); sliderWiOut.textContent = sliderWi.value; const sliderLi = document.querySelector("#liIn"); const sliderLiOut = document.querySelector("#liIn + output"); sliderLi.addEventListener("input", function() { sliderLiOut.textContent = sliderLi.value; }); sliderLiOut.textContent = sliderLi.value; //Slider to String --------------------------------------------- document .getElementById("update-server") .addEventListener( "click", event => { let myString = []; // alle Slider finden document .querySelectorAll('input[type="range"]') .forEach(slider => { // String mit Slider-Wert erweitern myString.push(slider.name + "&" + slider.value); }); // POSTe alle Teilstrings in `myString` an den Server strOut = myString+"#"; document.getElementById("Out").innerHTML = strOut; }); </script> </body> </html> </code></pre> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807097#m1807097 Alois al.bachmeier@live.de 2023-03-17T17:02:20Z 2023-03-17T17:35:41Z Slider to JS variable <p>Hallo Rolf, vielen Dank! Da kann ein Anfänger richtig was lernen .... toll! Leider löst es mein zentrales Problem nicht. Ich habe deinen eleganten code mal genommen und ein paar Zeilen eingefügt, da müsste man das eigentlich gut sehen können: Innerhalb der Funktion hält strOut[0] den Sliderwert, außerhalb geht die Variable wieder auf "undefined". Ich brauche aber den Wert außerhalb um mit ihm einen String zu konstruieren, den ich an meinen kleinen Web-Server schicken will. Anmerkung: Die Anzeige in dieser HTML-Seite ist NUR zur Demo hier und nicht mein Ziel. Ich brauche den Wert des Sliders auch nur nachdem er bewegt wurde.</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">label[for=fpIn]</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Slider to JS-Var<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fußpunkt:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> °C <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> strOut<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> sliderFp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fpIn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> sliderOut <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fpIn + output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> sliderFp<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> sliderOut<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span>sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</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> sliderOut<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807109#m1807109 Alois 2023-03-18T14:25:10Z 2023-03-18T15:18:26Z Slider to JS variable <p>Hallo Rolf, das ist ja ganz vertrackt: Innerhalb eines "addEventListener" behält eine Vaiable ihren zugewiesenen Wert, außerhalb ist er weg. Das gilt auch für globale Variable. In deinem, von mir modifizierten Code, sieht man das ganz deutlich. Irgend eine Idee, den Slider-Wert da rauß zu bekommen?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">label[for=fpIn]</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Slider to JS-Var<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fußpunkt:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> °C <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test1:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test2:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test3:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> strOut<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> window<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 punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">const</span> sliderFp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fpIn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> sliderOut <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fpIn + output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> sliderFp<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> sliderOut<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span>sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</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> sliderOut<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sliderFp<span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> strOut<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">"yxz"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test3"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>strOut<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807088#m1807088 Der Martin 2023-03-17T10:00:18Z 2023-03-17T10:00:18Z Slider to JS variable <p>Hallo Robert,</p> <blockquote> <p>Das Gradzeichen <code>°</code> ist außerhalb des ASCII-Zeichensatzes, weshalb es sinnvoll sein kann, im <code>head</code> die Codierung deines Dokuments anzugeben. Default ist in HTML <em>ISO-8859-1</em>.</p> </blockquote> <p>da wäre das Grad-Zeichen enthalten. Trotzdem ist es eine gute Idee, die verwendete Codierung explizit anzugeben. Bevorzugt im HTTP-Header, aber eine Angabe per meta-Element im Dokument ist als Fallback auch kein Fehler.</p> <blockquote> <p>Das Zeichen mit dem Unicode-Point <code>202f</code> ist ein <em>schmales geschütztes Leerzeichen</em>, wie es zwischen Zahlen und Einheiten verwendet wird.</p> </blockquote> <p>Außer bei Einheiten, die nicht mit Buchstaben notiert werden wie Grad oder Prozent - die werden ohne Abstand direkt an den Zahlenwert gehängt.<br> Zumindest habe ich das so gelernt.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> Kaffee ist nur schädlich, wenn Ihnen ein ganzer Sack aus dem 5. Stock auf den Kopf fällt. </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807092#m1807092 Rolf B 2023-03-17T11:42:58Z 2023-03-17T11:42:58Z Slider to JS variable <p>Hallo Robert B.,</p> <blockquote> <p>weshalb es sinnvoll sein kann, im head die Codierung deines Dokuments anzugeben. Default ist in HTML ISO-8859-1.</p> </blockquote> <p>Und das ist total bekloppt, denn: <a href="https://html.spec.whatwg.org/#charset" rel="nofollow noopener noreferrer">https://html.spec.whatwg.org/#charset</a></p> <p>Danach kennt HTML 5 <strong>nur noch</strong> UTF-8, dieses Encoding ist für HTML-5 Dokumente verpflichtend.</p> <p>Mein Chrome hier führt beim Laden von file:/// ein character sniffing durch und unterscheidet automatisch zwischen windows-1252 (was nicht <em>ganz</em> iso-8859-1 ist) und utf-8. Ich habe gerade keinen Webserver unter den Fingern, keine Ahnung ob er sich da anders verhält.</p> <p>Also grundsätzlich: Ja, man sollte <meta charset="utf-8"> hinschreiben und seine HTML Dateien auch so speichern. Das spart eine Menge &Auml;rger.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807090#m1807090 Mitleser 2.0 2023-03-17T10:16:56Z 2023-03-17T10:16:56Z Slider to JS variable <blockquote> <p>Trotzdem ist es eine gute Idee, die verwendete Codierung explizit anzugeben. Bevorzugt im HTTP-Header, aber eine Angabe per meta-Element im Dokument ist als Fallback auch kein Fehler.</p> </blockquote> <p>Mehr noch als "kein Fehler". Es ist eine gute Idee, die Codierung im Header <em>und</em> im Markup anzugeben. Die Angabe im Markup wirkt auf den ersten Blick vielleicht obsolet, wenn sie doch schon im Header vorgenommen hat.</p> <p>Was aber, wenn es gar keinen Header gibt, weil ich beispielsweise eine Seite lokal gespeichert habe? Dann ist die Meta-Angabe sehr nützlich.</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807098#m1807098 Rolf B 2023-03-17T17:54:08Z 2023-03-17T17:54:08Z Slider to JS variable <p>Hallo Alois,</p> <p>du verstehst scheinbar das Konzept der Events noch nicht.</p> <p>Das Script, so wie Du es jetzt hast, tut dies:</p> <p>Zeilen 1 - 3: Deklaration von drei "Konstanten" - also letztlich Variablen, deren Wert Du nachher nicht mehr ändern kannst. Dieses "const" bezieht sich aber nur auf den Wert der Variablen selbst. Die "Werte" in diesen Variablen sind Objekte (strOut ist ein Array und die slider...-Variablen sind Verweise auf DOM Elemente), und diese Objekte werden durch das "const" nicht vor Veränderungen geschützt.</p> <p><em>strOut ist jetzt ein leeres Array, d.h. strOut[0] ergibt den Wert <code>undefined</code>.</em></p> <p>Zeilen 5-9: Registrieren einer Funktion als EventListener für das input Event auf dem Slider. Hier passiert <strong>nichts</strong> außer dem Hinterlegen dieser Funktion als EventListener. Sie wird noch nicht ausgeführt.</p> <p>Zeile 11: Auslesen von sliderFp.value, Speichern im textContent von sliderOut</p> <p><em>strOut ist immer noch ein leeres Array</em></p> <p>Zeile 12: Speichern von strOut[0] im innerHTML von #test2.</p> <p>Was schrieb ich vorhin? innerHTML ist hier falsch. Es muss textContent sein. Du speicherst Text. Kein HTML.</p> <p>NUN endet dein Script erstmal, und JETZT erst fängt der Browser an, die Seite darzustellen.</p> <p>Sobald Du mit der Maus am Slider herumspielst, fängt er an, Events zu feuern. Jetzt wird die hinterlegte Funktion aufgerufen und speichert einen Wert in strOut[0]. Das hat aber für die Zeile 12 keine Bedeutung. Diese wird nicht mehr ausgeführt.</p> <blockquote> <p>Ich brauche aber den Wert außerhalb um mit ihm einen String zu konstruieren, den ich an meinen kleinen Web-Server schicken will.</p> </blockquote> <p>Die entscheidende Frage ist nun: Was soll diesen Abschickvorgang auslösen? Durch einen Timer? Einen Button? Soll der Wert automatisch nach dem Verändern des Sliders hochgeschickt werden?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807110#m1807110 Alois 2023-03-18T14:34:26Z 2023-03-18T14:34:26Z Slider to JS variable <p>Ich will die Werte mehrerer Slider in einem String zusammen fassen und an den Server schicken. Es geht um das "Zusammenfassen". Es soll eine Strings entstehen, den ich dann an den Server schicken will. Dieses geht aber nur, wenn ich die Werte verfügbar habe. Das Abschicken an den Server ist implementiert und funktioniert prima.</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807112#m1807112 Der Martin 2023-03-18T15:21:09Z 2023-03-18T15:21:09Z Slider to JS variable <p>Hallo,</p> <p>könntest du bitte Code-Snippets auch als Code markieren, damit es besser lesbar ist? Also markieren, dann den Button <strong></></strong> über dem Eingabefeld drücken, und im besten Fall nach dem einleitenden ~~~ noch die Sprache notieren (z.B. html)?</p> <p>Ich habe das mal für dich nachgeholt.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> Kaffee ist nur schädlich, wenn Ihnen ein ganzer Sack aus dem 5. Stock auf den Kopf fällt. </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807123#m1807123 Rolf B 2023-03-18T17:18:28Z 2023-03-18T17:18:28Z Slider to JS variable <p>Hallo Alois,</p> <p>wir erreichen nun das Thema "Scope von Variablen". Der Scope ist der Code-Bereich, wo eine Variable sichtbar ist.</p> <p>Du hast strOut auf globaler Ebene definiert. Damit ist sie überall sichtbar und Werte, die Du im change- oder input-Handler des Sliders zuweist, sind auch in einem submit-Eventhandler sichtbar.</p> <p>Aber: Was dein Beispiel zeigt, ist das, was ich schon vorher einmal erklärt habe: Die Eventhandler-Funktion wird von addEventListener lediglich <strong>registriert</strong>, aber nicht ausgeführt. Dein Code läuft nicht linear von oben nach unten. Die EventListener-Funktion wird erst später aufgerufen, wenn sich der Wert des Sliders ändert. Und dann läuft <strong>nur</strong> die Funktion und sonst nichts. Deine Ausgabe von strOut[1] am Ende findet statt, bevor die Funktion das erste Mal läuft.</p> <p>Und Du machst andere Dinge falsch.</p> <p>Schau erstmal hier: <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung" rel="nofollow noopener noreferrer">Grundlagen der Ereignisverarbeitung</a>, vor allem das Thema "Bubbling".</p> <ol> <li> <p>Du registrierst einen change-Handler auf dem window Objekt. Das hast Du bisher nicht getan, warum jetzt? Das change-Event gelangt natürlich irgendwann per Bubbling dorthin, aber es ist nicht so einfach, ein change- oder input-Event zu verarbeiten, das hochgebubbelt ist. Gerade dann nicht, wenn Du, wie hier, den Wert eines Sliders als Klartext anzeigen willst und Du mehrere Slider hast. Jeder Slider kann change auslösen, und diese change Events würden alle im gleichen Eventhandler landen. Es ist <strong>möglich</strong>, so vorzugehen, aber nicht so einfach.</p> </li> <li> <p>Du registrierst innerhalb dieses change-Handlers einen input-Handler. Das ist ganz falsch, weil Du dann bei jedem change-Event einen neuen input-Handler hinzufügst.</p> </li> <li> <p>Wenn Du die Slider zusammen mit dem Submit-Button in ein <form> Element packst, dann kannst Du über einen submit-Handler den Submit auf einen XMLHttpRequest umlenken (oder machst es mit jQuery Ajax oder dem fetch-API) und den Form-Inhalt über ein FormData Objekt an den Server posten. Es ist dann überhaupt nicht nötig, sich die Slider-Werte im change- oder input-Event zu merken. Guck Dir <a href="https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest" rel="nofollow noopener noreferrer">hier</a> mal Beispiel 2 an, um zu sehen, wie man aus dem Form-Element das FormData Objekt erzeugt und via XMLHttpRequest verschickt.</p> </li> </ol> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807111#m1807111 Alois 2023-03-18T14:39:59Z 2023-03-18T14:39:59Z Slider to JS variable <p>Das Hochschicken wird mit einem manuel ausgelösten Button "Submit" getriggert. Wie gesagt, wenn ich den String haben funktioniert das bereits.</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807141#m1807141 Alois 2023-03-19T09:09:16Z 2023-03-19T09:09:16Z Slider to JS variable <p>Hallo Rolf, zu 1. und 2. : Ich hatte das einfach aus einem Beispiel übernommen. War eher ein verzweifelter Versuch. Zu 3. : Das schau ich mir jetzt mal an.</p> <p>Auf alle Fälle erstmal vielen Dank für deine Hinweise (...und deine Geduld)!</p> <p>Grüße Alois</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807130#m1807130 Rolf B 2023-03-18T22:40:02Z 2023-03-18T22:40:02Z Slider to JS variable <p>Hallo Felix,</p> <p>neue JS Features wie Pfeilfunktionen sollten wir außen vor lassen, es ist für Alois schon genug an neuem Wissen, denke ich.</p> <p>Ist es nicht einfacher, die Slider - und was sonst zum Versand ansteht - in ein Form zu stecken und aus dem Form ein FormData zu initialisieren? Form und PHP sollten so gebaut sein, dass ein POST des Forms ebenfalls funktioniert, als Fallback falls das JS nicht ausgeführt wird. Mit JS verwendet man einen submit Listener.</p> <p>Gerade entdeckt: Ein FormData Objekt kann verwendet werden, um ein URLSearchParams-Objekt zu initialisieren. Auf dem ruft man toString() auf und verwendet es als Body für den POST Request.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temperaturen<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>setTemp.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for...</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp1<span class="token punctuation">"</span></span> <span class="token attr-name">min...</span> <span class="token attr-name">max...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for...</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp2<span class="token punctuation">"</span></span> <span class="token attr-name">min...</span> <span class="token attr-name">max...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for...</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp3<span class="token punctuation">"</span></span> <span class="token attr-name">min...</span> <span class="token attr-name">max...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>save<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Senden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p>Die Labels sind nur angedeutet und müssen natürlich ausformuliert werden.</p> <pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>temperaturen<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"submit"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">submitEvent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> params <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>submitEvent<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> params<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"save"</span><span class="token punctuation">,</span> <span class="token string">"ajax"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hier Ajax-Code, versende damit params.toString() an setTemp.php</span> <span class="token comment">// zum Beispiel:</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"setTemp.php"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span> <span class="token literal-property property">body</span><span class="token operator">:</span> params<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"Content-Type"</span><span class="token punctuation">,</span> <span class="token string">"application/x-www-form-urlencoded"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Submit durch den Browser verhindern</span> submitEvent<span class="token punctuation">.</span><span class="token function">preventDefault</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>submitEvent.target ist das Form-Element, daraus wird ein FormData und daraus ein URLSearchParams Objekt. Der save-Button ist darin nicht enthalten, das passiert nur beim Browser-Versand. Deshalb wird der save-Eintrag gefaked, mit einem vom Form abweichenden Value, so dass man ggf. am Server zwischen einem POST durch den Browser und einen POST durch den EventListener unterscheiden kann.</p> <p>Dann folgt Standard-AJAX-Code, XMLHttpRequest oder fetch, zum Hochschicken. Darin muss man den Content-Type Header auf application/x-www-form-urlencoded setzen.</p> <p>Statt den Header zu setzen kann man auch auf die Einkapselung in URLSearchParams verzichten und direkt das FormData Objekt schicken, das geschieht dann aber automatisch als multipart/form-data. Das ist PHP egal, sind aber mehr Bytes auf der Leitung.</p> <p>Fertig. Ein Merken der Sliderwerte im change-Handler ist in keinem Fall nötig.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807132#m1807132 Felix Riesterer https://felix-riesterer.de 2023-03-18T23:40:48Z 2023-03-18T23:40:48Z Slider to JS variable <p>Lieber Rolf,</p> <blockquote> <p>neue JS Features wie Pfeilfunktionen sollten wir außen vor lassen, es ist für Alois schon genug an neuem Wissen, denke ich.</p> </blockquote> <p>wenn Du meinst, dass die Schreibweise ein Problem sein sollte... das kann nur Alois beantworten.</p> <blockquote> <p>Ist es nicht einfacher, die Slider - und was sonst zum Versand ansteht - in ein Form zu stecken und aus dem Form ein FormData zu initialisieren?</p> </blockquote> <p>Für Alois war genau dieses Problem <a href="https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807111#m1807111" rel="noopener noreferrer">laut seinen Worten schon gelöst</a>. Er bastelt einen wie auch immer gearteten String und schickt ihn irgendwie an den Server. Ob das aber besser mit FormData und Ajax passieren sollte, und ob das Formular unbedingt auch über einen regulären POST-Request an den Server übertragen werden können muss - weil das als Default/Fallback das technische Minimum bedeutet und JS lediglich als <em lang="en">progressive enhancement</em> fungieren darf - erscheint mir das Alois' Formulierungen nach entweder für ihn fremd, oder für seinen (uns unbekannten) Anwendungsfall bewusst gewählt.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807133#m1807133 Rolf B 2023-03-19T00:13:20Z 2023-03-19T00:13:20Z Slider to JS variable <p>Hallo Felix Riesterer,</p> <blockquote> <p>wenn Du meinst, dass die Schreibweise ein Problem sein sollte</p> </blockquote> <p>Pfeilfunktionen unterscheiden sich auch bezüglich <code>this</code>. Für jemanden, der offenbar noch mit Eventverarbeitung und Scoping kämpft, ein Zukunftsthema. Find ich.</p> <p>Mein Plädoyer für ein Form und Formdata bezieht sich hauptsächlich auf das Einsparen von selbst zu schreibendem (und zu testendem) Code und eine sinnvolle Seitengestaltung.</p> <ul> <li>Man muss die Datenelemente nicht zusammensuchen, sondern gliedert sie passend im HTML. Was auch der Semantik der Seite hilft.</li> <li>Das Versenden per Submit-Button in einem Form ist ebenfalls logischer als ein generischer Button</li> <li>Man muss keinen eigenen String zusammenbauen - möglicherweise auch noch inkompatibel zu Standards wie x-www-form-urlencoded</li> <li>Man muss keine Sonderzeichen escapen, es ist alles fertig und als Ein- bis Dreizeiler erledigt.</li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807199#m1807199 Alois al.bachmeier@live.de 2023-03-20T16:59:54Z 2023-03-20T16:59:54Z Slider to JS variable <p>Hallo Felix ... genauso ist das! Ich bin ziemlicher Leie was HTML/JS/PHP .... betrifft und will auch kein Könner werden. Was ich mache: Ich baue mir mit einem ESP32 eine Heizungssteuerung (Wärmepumpe) und das wird auch funktionieren. Statt einer Eingabe über Druckknöpfe und eine LCD-Ausgabe will das gerne über mein Handy machen und das läuft auch fast schon alles (wahrscheinlich ziemlich unelegant) bis auf die Geschichte mit den Slidern. Leider ist es immer noch so, dass ich die Werte nicht verfügbar bekommen. Für einen 3/4/5-Zeiler, der das macht wäre ich schon sehr dankbar!</p> <p>Beste Grüße Alois</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807213#m1807213 Felix Riesterer https://felix-riesterer.de 2023-03-21T04:58:26Z 2023-03-21T04:58:26Z Slider to JS variable <p>Lieber Alois,</p> <blockquote> <p>Was ich mache: Ich baue mir mit einem ESP32 eine Heizungssteuerung (Wärmepumpe) und das wird auch funktionieren. Statt einer Eingabe über Druckknöpfe und eine LCD-Ausgabe will das gerne über mein Handy machen</p> </blockquote> <p>jetzt haben wir endlich die ganze Geschichte!</p> <blockquote> <p>und das läuft auch fast schon alles</p> </blockquote> <p>Anscheinend nicht.</p> <blockquote> <p>Leider ist es immer noch so, dass ich die Werte nicht verfügbar bekommen.</p> </blockquote> <p>Eben.</p> <p>Also hat Rolf schon Recht, wenn er vorschlägt, dass Du Dein Formular mit den Slidern ganz regulär abschickst, damit ihre Werte auf die übliche Weise beim Server ankommen. Damit ersparst Du Dir den Hickhack mit JavaScript.</p> <p>Zeig mal, wie Dein Dokument wirklich aussieht (egal, ob auf <a href="https://codepen.io/" rel="noopener noreferrer">Codepen</a>, <a href="https://dabblet.com/" rel="noopener noreferrer">Dabblet</a> oder <a href="https://jsfiddle.net/" rel="noopener noreferrer">JSFiddle</a>, nur nicht hier in einer Code-Wurst). Dann kann man Dir auch helfen. Wenn Du es mit PHP zusammenbaust, dann zeige bitte nicht den PHP-Quelltext, sondern das Ergebnis in HTML. Wenn Du kein PHP verwendest, dann erzähle uns bitte auch, wie das HTML erzeugt wird.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807218#m1807218 Rolf B 2023-03-21T08:32:53Z 2023-03-21T08:32:53Z Slider to JS variable <p>Hallo Felix Riesterer,</p> <blockquote> <p>ganz regulär abschickst</p> </blockquote> <p>Als Fallback. Ein submit-Handler als progressive enhancement ist ja nicht verboten.</p> <p>Aber ein Form ist auf jeden Fall eine hilfreiche Maßnahme.</p> <p>Und selbst wenn Alois das nicht will - das Speichern in JavaScript-Variablen ist das falsche Konzept. Man lese beim Senden einfach die Slider neu aus.</p> <p>Die bisher von Alois beschriebenen Probleme zeigen jedenfalls ein solides Unverständnis von Eventhandling, denn die Werte landen ja in den Variablen. Er gibt sie nur zu früh aus und wundert sich dann.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807285#m1807285 Rolf B 2023-03-22T16:25:30Z 2023-03-22T16:25:30Z Slider to JS variable <p>Hallo Alois,</p> <pre><code class="block language-js"> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">slider</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// String mit Slider-Wert erweitern</span> myString<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>slider<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">"&"</span> <span class="token operator">+</span> slider<span class="token punctuation">.</span>value<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> strOut <span class="token operator">=</span> myString<span class="token operator">+</span><span class="token string">"#"</span><span class="token punctuation">;</span> </code></pre> <p><em>kann</em> man machen. Aber das ist alles andere als Standard.</p> <ul> <li>myString nennt sich String, ist aber ein Array. Diese Variable sollte "myParams" oder so heißen, um keine falsche Suggestion zu tragen</li> <li>Ein Array und einen String mit "+" zu verketten geht, weil JavaScript da gnädiger ist als der liebe Gott. Es konvertiert das Array dadurch zu einem String, und tut das so, dass es die Array-Einträge kommagetrennt aneinanderpappt.</li> <li>Du verwendest das Komma zum Trennen der Parameter und das & als Trennzeichen für Name und Wert - bei einer Übergabe an den Server ist das & aber eigentlich als Trennzeichen für die Parameter gängig und ein = als Trenner zwischen Name und Wert.</li> </ul> <p>Dein 12 Monate älteres Ich, das diesen Code liest und seitdem mehr gelernt hat, wird Dich dafür HASSEN.</p> <p>Vor allem, weil Du auf dem Server nun die Parameter in Eigenregie wieder auseinandernehmen musst.</p> <p>Vorschlag:</p> <pre><code class="block language-js"> <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"http://mein-esp32/set_temp.php"</span><span class="token punctuation">)</span><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[type="range"]'</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 parameter">slider</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// URL mit Slider-Wert erweitern</span> url<span class="token punctuation">.</span>searchParams<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>slider<span class="token punctuation">.</span>name<span class="token punctuation">,</span> slider<span class="token punctuation">.</span>value<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> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Out"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">toString</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>Damit bekommst Du eine fertige URL, wo die Parameter als URL Parameter drinstehen. "mein-esp32" musst Du natürlich geeignet ändern.</p> <p>Damit kannst Du einen POST-Request an deinen ESP32 machen (ja, POST, weil Du was änderst - ein GET Request ist hier falsch). Dass die Parameter in der URL statt im Body übergeben werden, ist erlaubt.</p> <p>Also so:</p> <pre><code class="block language-js"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"POST"</span><span class="token punctuation">,</span> url<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Oder als Einzeiler so:</p> <pre><code class="block language-js"><span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das .toString() kannst Du vermutlich sogar weglassen, ich kann es gerade nur nicht ausprobieren.</p> <p>Im PHP findest Du dann in $_SERVER['REQUEST_METHOD'] den Wert 'POST' vor, um den Requesttyp zu erkennen, und im $_GET Array die übergebenen Daten. Wenn Du denn PHP auf dem ESR verwendest und nicht irgendwas anderes.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/17/slider-to-js-variable/1807290#m1807290 Robert B. 2023-03-22T17:21:00Z 2023-03-22T17:21:00Z Slider to JS variable <p>Moin Alois,</p> <p>wenn du Quellcode <em>im Forum passend auszeichnest</em>, hilft das ungemein beim Verstehen … Und ein paar Dinge sind weiterhin, obwohl du darauf hingewiesen worden bist.</p> <blockquote> <pre><code class="block language-css"><span class="token selector">label</span> <span class="token punctuation">{</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> </blockquote> <p>Dein folgender HTML-Code enthält gar keine <code>label</code>.</p> <blockquote> <pre><code class="block language-css"><span class="token selector">input</span> <span class="token punctuation">{</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.slidecontainer</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> </blockquote> <p>Eine fixe Breite in Pixel kann beim Vergrößern/Verkleinern (Zoomen) der Seite problematisch angezeigt werden, nimm lieber relative Dimensionen.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>slidecontainer</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>… oder auch <code>form</code> oder <code>fieldset</code>.</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Fußpunkt:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fpIn<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-20<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-15<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> °C <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Die <code>label</code> hätte ich jetzt hier erwartet. Was die <code>hr</code>-Trenner und vor allem der Zeilenumbruch <em>vor</em> dem nächsten Absatz sollen, ist mir unklar. Das <code>br</code> brauchst du gar nicht, das <code>hr</code> erscheint auch deplatziert.</p> <p>Das betrifft natürlich die Konstrukte aller deiner Inputs.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>update-server<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Werte senden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Ein <code>button</code> ohne <code>type</code> ist ein <em>Submit-Button</em>. Daran musst du bei der Verwendung von <code>form</code>s denken.</p> <p>Viele Grüße<br> Robert</p>