tag:forum.selfhtml.org,2005:/self Fehler bei Breite einer Grafik ermitteln – SELFHTML-Forum 2022-11-21T21:00:34Z https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803929#m1803929 Linuchss 2022-11-21T14:03:44Z 2022-11-21T14:03:44Z Fehler bei Breite einer Grafik ermitteln <p>Moin,</p> <p>irgendwie Brett vorm Kopf ...</p> <p>Ich lade eine Grafik, deren Größe mit style angepasst wird. Nun möchte ich wissen, wie breit sie ist.</p> <pre><code class="block language-js"> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token string">"position:relative;width:100%;height:40em;overflow-x:sccroll;overflow-y:hidden;border:1px solid #080;"</span><span class="token operator">></span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token string">"position:absolute;left:50%;height:100%;border-left:2px solid #f00;"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>img id<span class="token operator">=</span>rolle src<span class="token operator">=</span><span class="token string">"../noten/You_took_the_words_right_out_of_my_mouth_Tonikum.svg"</span> alt<span class="token operator">=</span>Notenrolle style<span class="token operator">=</span><span class="token string">"margin-left:50%;height:100%;"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>br<span class="token operator">></span> <span class="token operator"><</span>script<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">"#rolle"</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">'load'</span><span class="token punctuation">,</span> <span class="token function">alert</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">+</span><span class="token string">"*"</span> <span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>Fehlermeldung: <code>Uncaught TypeError: document.querySelector(...).addEventlistener is not a function</code></p> <p>Wieso?</p> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803930#m1803930 Jonathan Harker 2022-11-21T14:09:50Z 2022-11-21T14:09:50Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Linuchss,</p> <blockquote> <pre><code class="block language-js"> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token string">"position:relative;width:100%;height:40em;overflow-x:sccroll;overflow-y:hidden;border:1px solid #080;"</span><span class="token operator">></span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token string">"position:absolute;left:50%;height:100%;border-left:2px solid #f00;"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>img id<span class="token operator">=</span>rolle src<span class="token operator">=</span><span class="token string">"../noten/You_took_the_words_right_out_of_my_mouth_Tonikum.svg"</span> alt<span class="token operator">=</span>Notenrolle style<span class="token operator">=</span><span class="token string">"margin-left:50%;height:100%;"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>br<span class="token operator">></span> <span class="token operator"><</span>script<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">"#rolle"</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">'load'</span><span class="token punctuation">,</span> <span class="token function">alert</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">+</span><span class="token string">"*"</span> <span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>Fehlermeldung: <code>Uncaught TypeError: document.querySelector(...).addEventlistener is not a function</code></p> </blockquote> <p>Leerzeichen zw. Methode und Klammer?</p> <p><code>document.querySelector("#rolle").addEventlistener( 'load', alert( this.width +"*" +this.height));</code></p> <p>Bis bald!</p> <p>Jonathan</p> <div class="signature">-- <br> "Ich habe heute ein Elan-Problem und mein Tatenvolumen ist fast aufgebraucht!" </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803931#m1803931 Rolf B 2022-11-21T14:13:44Z 2022-11-21T14:13:44Z Fehler bei Breite einer Grafik ermitteln <p>Hallo linuchss,</p> <p>Um das zu finden, muss man wie ein luchs hinschauen. Und dann klappt das mit dem Event<strong>L</strong>istener.</p> <p>(Dieses Posting enthält 3 Tipps)</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803939#m1803939 Tabellenkalk 2022-11-21T14:46:03Z 2022-11-21T14:46:03Z Fehler bei Breite einer Grafik ermitteln <p>Hallo,</p> <blockquote> <pre><code><img [...] alt=Notenrolle [...] /> </code></pre> </blockquote> <p>Ist das erlaubt und/oder sogar üblich, <code>alt</code> ohne Anführungszeichen?</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803932#m1803932 Linuchss 2022-11-21T14:15:36Z 2022-11-21T14:15:36Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Jonathan,</p> <p>Leerzeichen entfernt, Fehler bleibt (hätte mich auch sehr gewundert).</p> <p>Bevor der Fehler angezeigt wird, erscheint dieses:</p> <p><a href="/images/e2ef914c-69a6-11ed-8e91-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/e2ef914c-69a6-11ed-8e91-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803933#m1803933 Rolf B 2022-11-21T14:16:13Z 2022-11-21T14:16:13Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Jonathan,</p> <p>Nö, Whitespace vor und nach Klammern ist beliebig.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803937#m1803937 Linuchss 2022-11-21T14:29:26Z 2022-11-21T14:29:26Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Rolf,</p> <p>ich habe extra eine funktionierende Zeile drübergesetzt:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#tempo'</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">'input'</span><span class="token punctuation">,</span> setTempo<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Also lag ich vollkommen richtig: Brett vorm Kopf.</p> <p>Danke.</p> <p>Der Fehler ist zwar weg, aber der alert bleibt:</p> <p><a href="/images/d664848a-69a8-11ed-a33b-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/d664848a-69a8-11ed-a33b-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803934#m1803934 linuchss 2022-11-21T14:18:41Z 2022-11-21T14:18:41Z Fehler bei Breite einer Grafik ermitteln <p>Die SVG-Datei ist 7,1 MB groß, alles aber lokal. Problem?</p> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803936#m1803936 Der Martin 2022-11-21T14:28:17Z 2022-11-21T14:29:45Z Fehler bei Breite einer Grafik ermitteln <p>Hallo,</p> <blockquote> <p>Bevor der Fehler angezeigt wird, erscheint dieses:</p> <p><a href="/images/e2ef914c-69a6-11ed-8e91-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/e2ef914c-69a6-11ed-8e91-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>natürlich, du rufst ja auch erst das alert() auf, um dann dessen Ergebnis als Eventhandler zu setzen.<br> Von dem Schreibfehler, <a href="https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803931#content" rel="noopener noreferrer">den Rolf schon gefunden hat</a>, mal abgesehen.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden". </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803944#m1803944 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-11-21T15:42:07Z 2022-11-21T15:42:07Z Fehler bei Breite einer Grafik ermitteln <p>@@linuchss</p> <blockquote> <p>Die SVG-Datei ist 7,1 MB groß, alles aber lokal. Problem?.</p> </blockquote> <p>Ja. Der SVG-Code muss ja geparst und ein DOM daraus erstellt werden.</p> <p>Was ist das für eine Grafik, die so riesig ist? Sind die Werte mit unsinnig vielen Nachkommastellen angegeben? Ist SVG für diese Art Grafik vielleicht das falsche Format?</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803941#m1803941 Rolf B 2022-11-21T15:24:16Z 2022-11-21T15:24:16Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Linuchss,</p> <p>möglicherweise bekommt der load Eventhandler nicht das Element, auf dem er registriert wurde, als this übergeben.</p> <p>Mach's besser so, das ist jedenfalls besser als this:</p> <pre><code class="block language-js"><span class="token operator">...</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>width <span class="token operator">+</span> <span class="token string">"×"</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>height<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>Bzw. bevor Gunnar mich wieder wegen der Template-Strings ausschimpft:</p> <pre><code class="block language-js"><span class="token operator">...</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>ˋ$<span class="token punctuation">{</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>width<span class="token punctuation">}</span> × $<span class="token punctuation">{</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>height<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><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803940#m1803940 Der Martin 2022-11-21T15:07:27Z 2022-11-21T15:07:27Z Fehler bei Breite einer Grafik ermitteln <p>Hallo,</p> <blockquote> <blockquote> <pre><code><img [...] alt=Notenrolle [...] /> </code></pre> </blockquote> <p>Ist das erlaubt und/oder sogar üblich, <code>alt</code> ohne Anführungszeichen?</p> </blockquote> <p>es ist ebenso wie bei allen anderen Attributen erlaubt, solange der Attributwert nur aus Buchstaben und Ziffern besteht. Üblich oder empfohlen ist es allerdings nicht.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden". </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803943#m1803943 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-11-21T15:36:26Z 2022-11-21T15:36:26Z Fehler bei Breite einer Grafik ermitteln <p>@@Der Martin</p> <blockquote> <blockquote> <p>Ist das erlaubt und/oder sogar üblich, <code>alt</code> ohne Anführungszeichen?</p> </blockquote> <p>es ist ebenso wie bei allen anderen Attributen erlaubt, solange der Attributwert nur aus Buchstaben und Ziffern besteht.</p> </blockquote> <p>Oder anderen Zeichen, die ebenfalls in Attributwerten ohne Anführungszeichen drumrum erlaubt sind.</p> <p>In der <a href="https://cssbattle.dev/" rel="nofollow noopener noreferrer">CSSBattle</a> führt manchmal ein <code>style</code>-Attribut zum kürzeren Code; da versucht man, Anführungszeichen zu vermeiden:</p> <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 attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>926927</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin</span><span class="token punctuation">:</span>70 35%70 160<span class="token punctuation">;</span><span class="token property">border</span><span class="token punctuation">:</span>22q solid#fff<span class="token punctuation">;</span><span class="token property">border-radius</span><span class="token punctuation">:</span>32q<span class="token punctuation">;</span><span class="token property">filter</span><span class="token punctuation">:</span><span class="token function">drop-shadow</span><span class="token punctuation">(</span>-21q 0#6D480A</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> </code></pre> <p>ist für Loser. </p> <pre><code class="block good language-HTML"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>926927</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token value css language-css"><span class="token property">margin</span><span class="token punctuation">:</span>70+35%70+160<span class="token punctuation">;</span><span class="token property">border</span><span class="token punctuation">:</span>solid#fff+22q<span class="token punctuation">;</span><span class="token property">border-radius</span><span class="token punctuation">:</span>32q<span class="token punctuation">;</span><span class="token property">filter</span><span class="token punctuation">:</span><span class="token function">drop-shadow</span><span class="token punctuation">(</span>-21q+0#6D480A</span></span></span><span class="token punctuation">></span></span> </code></pre> <p>(Beachte die geänderte Reihenfolge bei <code>border</code>.)</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803942#m1803942 Der Martin 2022-11-21T15:28:32Z 2022-11-21T16:37:45Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Rolf,</p> <blockquote> <p>möglicherweise bekommt der load Eventhandler nicht das Element, auf dem er registriert wurde, als this übergeben.</p> </blockquote> <p>so weit kommt es gar nicht. Linuchs versucht, <strong>das Ergebnis</strong> von alert() als Eventhandler zu registrieren. Habe ich aber <a href="https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803936#m1803936" rel="noopener noreferrer">vor einer Stunde schon gesagt</a>.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden". </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803953#m1803953 Linuchs 2022-11-21T21:00:34Z 2022-11-21T21:00:34Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Rolf,</p> <blockquote> <p>bevor Gunnar mich wieder wegen der Template-Strings ausschimpft:</p> </blockquote> <p>danke, aber dies gibt den Fehler <code>Uncaught SyntaxError: missing ) after argument list</code></p> <pre><code class="block language-js"> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#rolle"</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">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>ˋ$<span class="token punctuation">{</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>width<span class="token punctuation">}</span> × $<span class="token punctuation">{</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>height<span class="token punctuation">}</span>ˋ<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// alert( event.target.width +"*" +event.target.height );</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Stattdessen die auskommentierte Zeile zeigt</p> <p><a href="/images/5dc91086-69df-11ed-b312-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/5dc91086-69df-11ed-b312-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>und ist okay. Was ist das nun wieder?</p> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803946#m1803946 Rolf B 2022-11-21T17:50:30Z 2022-11-21T17:50:30Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Martin,</p> <p>jau, und ich hab's nicht kapiert, das ist mir komplett entfleucht.</p> <p>Aber mein event-Hinweis bringt die function ja mit </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803945#m1803945 Der Martin 2022-11-21T16:36:42Z 2022-11-21T16:36:42Z Fehler bei Breite einer Grafik ermitteln <p>Hallo,</p> <blockquote> <blockquote> <p>Die SVG-Datei ist 7,1 MB groß, alles aber lokal. Problem?.</p> </blockquote> <p>Ja. Der SVG-Code muss ja geparst und ein DOM daraus erstellt werden.</p> </blockquote> <p>das ist ein starkes Argument.</p> <blockquote> <p>Was ist das für eine Grafik, die so riesig ist? Sind die Werte mit unsinnig vielen Nachkommastellen angegeben?</p> </blockquote> <p>Oder Bögen mit unsinnig vielen Stützpunkten?<br> Oder ist es ein SVG mit einer eingebetteten Rastergrafik?</p> <blockquote> <p>Ist SVG für diese Art Grafik vielleicht das falsche Format?</p> </blockquote> <p>Könnte man bei solchen Speichermonstern denken.<br> Oder Linuchs hat sich vertan und meinte eigentlich 7.1 kB.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden". </div> https://forum.selfhtml.org/self/2022/nov/21/fehler-bei-breite-einer-grafik-ermitteln/1803951#m1803951 Linuchs 2022-11-21T20:23:34Z 2022-11-21T20:23:34Z Fehler bei Breite einer Grafik ermitteln <p>Hallo Gunnar,</p> <blockquote> <p>Was ist das für eine Grafik, die so riesig ist?</p> </blockquote> <p>Ich experimentiere mit einer Partitur (4 Chorstimmen untereinander, 127 Takte), die unter einer Linie durchrollen soll, während sie vom Audio-Tag (Master) synchronisiert wird.</p> <p>Sinn: Sänger können zuhause (nur mit Browser) ihre Stimme lauter stellen und mitsingen, während die Noten durchrollen.</p> <p>Die Größe ist mir auch unheimlich, mal sehen, ob man die Grafiken stückeln und nachladen kann. So sieht es aus:</p> <p><a href="/images/4db458ea-69da-11ed-8518-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/4db458ea-69da-11ed-8518-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p>