tag:forum.selfhtml.org,2005:/selfJavascript fehler – SELFHTML-Forum2015-11-27T09:39:51Zhttps://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654330#m1654330mely2015-11-12T23:55:11Z2015-11-12T23:55:11ZJavascript fehler<p>Hallo,</p>
<p>ich habe folgendes Problem:
Wenn ich die Seite durchscrolle, ändert sich die Farbe von dem Link im Menü. Äbhängig wo man sich befindet bleibt der Menüpunkt grün. Alle anderen sind grau. Das gleiche soll auch passieren wenn man auf das Menüpunkt klickt. Also die Aktuelle link wird grün und alle anderen bleiben grau. Klickt man auf ein anderen Menüpunkt wird er grün und alle anderen wieder grau. In meinem <strong>script.js</strong>(ganz unten im quelltext) ist wahrschinlich was falsches eingegeben, da nicht bei jedes Menüklick bleib er grün. Ich habe die Fehler viel gesucht, aber nicht gefunden. Kann mir jemand helfen. Danke im voraus <a href="http://websara.bplaced.net/webseite/index.html#test4" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p>
<p>Das ist ein Teil von script.js und ich glaube die Fehler ist hier irgendwo. Kann das sein?</p>
<pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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 function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"navTest"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">+</span><span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onScroll</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> scrollPosition <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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">var</span> currentLink <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> refElement <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>currentLink<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"href"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>refElement<span class="token punctuation">.</span><span class="token function">position</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator"><=</span> scrollPosition <span class="token operator">&&</span> refElement<span class="token punctuation">.</span><span class="token function">position</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator">+</span> refElement<span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> scrollPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav ul li a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
currentLink<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span><span class="token punctuation">{</span>
currentLink<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"active"</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>Grüße</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654331#m1654331November2015-11-13T02:11:25Z2015-11-13T02:11:25ZJavascript fehler<p>Hallo,</p>
<p>so auf die Schnelle sehe ich das ein }); zuviel war, ob das aber der Fehler war?</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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 function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">+</span><span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>gruesse november</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654332#m1654332Orlok2015-11-13T02:16:18Z2015-11-13T09:29:46ZJavascript fehler<p>Hallo Mely</p>
<p>Bin etwas zu müde um mir das jetzt genauer anzuschauen, aber du könntest mal folgendes versuchen:</p>
<ul>
<li>
<p>In der Zeile <code class="language-javascript"><span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">+</span><span class="token number">2</span></code> die ‚+2‘ am Ende rausnehmen, und</p>
</li>
<li>
<p>in der Funktion <code class="language-javascript">onScroll</code> die Anweisung <code class="language-javascript"><span class="token keyword">else</span> <span class="token punctuation">{</span> currentLink<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code> löschen.</p>
</li>
</ul>
<p>Viele Grüße,</p>
<p>Orlok</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654349#m1654349mely2015-11-13T09:27:09Z2015-11-13T09:27:09ZJavascript fehler<blockquote>
<p>Hallo,</p>
<p>so auf die Schnelle sehe ich das ein }); zuviel war, ob das aber der Fehler war?</p>
</blockquote>
<p>Hallo November,
nein, die Klammer ist nicht zu viel, da ich nur ein Teil von mein script veröffentlicht habe und deswegen saß es nur so aus.
Vielen Dank, aber trotzdem für dein Antwort.
grüße,
mely</p>
<blockquote>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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 function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">+</span><span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>gruesse november</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654350#m1654350mely2015-11-13T09:29:37Z2015-11-13T09:29:37ZJavascript fehler<blockquote>
<p>Hallo Mely</p>
<p>Bin etwas zu müde um mir das jetzt genauer anzuschauen, aber du könntest mal folgendes versuchen:</p>
<ul>
<li>
<p>In der Zeile <code class="language-javascript"><span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">+</span><span class="token number">2</span></code> die ‚+2‘ am Ende rausnehmen, und</p>
</li>
<li>
<p>in der Funktion <code class="language-javascript">onScroll</code> die Anweisung <code class="language-javascript"><span class="token keyword">else</span> <span class="token punctuation">{</span> currentLink<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code> löschen.</p>
</li>
</ul>
</blockquote>
<p>Hallo Orlok,</p>
<p>es hat funktioniert mit deine Anweisungen. Vielen Dank :) Ich verstehe nur nicht wie kommst du darauf. Kannst du es mir kurz erklären. Danke im voraus.</p>
<p>Grüße,
mely</p>
<blockquote>
<p>Viele Grüße,</p>
<p>Orlok</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654465#m1654465mely2015-11-14T14:56:49Z2015-11-14T14:57:28ZJavascript fehler<blockquote>
<p>Hallo Mely</p>
<p>Bin etwas zu müde um mir das jetzt genauer anzuschauen, aber du könntest mal folgendes versuchen:</p>
<ul>
<li>
<p>In der Zeile <code class="language-javascript"><span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token operator">+</span><span class="token number">2</span></code> die ‚+2‘ am Ende rausnehmen, und</p>
</li>
<li>
<p>in der Funktion <code class="language-javascript">onScroll</code> die Anweisung <code class="language-javascript"><span class="token keyword">else</span> <span class="token punctuation">{</span> currentLink<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code> löschen.</p>
</li>
</ul>
</blockquote>
<p>Hallo,
gerade merke ich, dass das Problem ist zwar behoben, aber dass es neue Problem dadurch entsteht. Und zwar, dass wenn man die Seite neuladet mit F5 die Seite bleibt wo sie war, aber die Linkfarbe springt zu der Start siehe <a href="http://mely.bplaced.net/webseite/test.html" rel="nofollow noopener noreferrer">Linkbeschreibung</a>.</p>
<p>Grüße</p>
<blockquote>
<p>Viele Grüße,</p>
<p>Orlok</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654470#m1654470Orlok2015-11-14T16:18:56Z2015-11-14T16:26:50ZJavascript fehler<p>Hallo Mely</p>
<p>Erstmal sorry, dass ich auf <a href="https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654350#m1654350" rel="noopener noreferrer">deine andere Frage</a> bisher noch nicht geantwortet habe. ;-)</p>
<p>Du wolltest wissen, wie ich darauf gekommen bin, dass das Problem mit den von mir genannten Anweisungen zusammenhängen könnte…</p>
<p>Naja, da gibt es nicht viel dazu zu sagen:</p>
<ul>
<li>
<p>Die zu dem Wert von <code class="language-javascript">$target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top</code> hinzugezählten ‚+2‘ wurden in deiner Funktion <code>onScroll</code> <em>nicht</em> berücksichtigt und erschienen mir davon abgesehen auch grundsätzlich sinnlos.</p>
</li>
<li>
<p>Die <code class="language-javascript"><span class="token keyword">else</span></code>-Anweisung wiederum schien auf den ersten Blick die einzig logische Ursache dafür zu sein, dass das mit der Link-Farbe nicht funktioniert hat, denn in deinem <code>click</code>-Handler hattest du ja die Anweisung <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span></code> notiert, die <em>eigentlich</em> dafür sorgen sollte, dass der Link auch entsprechend eingefärbt wird. Es musste darum an deinem <code>scroll</code>-Handler liegen, der jedesmal (<code class="language-javascript"><span class="token keyword">else</span></code>), wenn die <code class="language-javascript"><span class="token keyword">if</span></code>-Bedingung <em>nicht</em> greift, automatisch die Klasse (<em>und somit die Farbe</em>) weggenommen hat.</p>
</li>
</ul>
<blockquote>
<p>Gerade merke ich, dass das Problem ist zwar behoben, aber dass es neue Problem dadurch entsteht. Und zwar, dass wenn man die Seite neuladet mit F5 die Seite bleibt wo sie war, aber die Linkfarbe springt zu der Start.</p>
</blockquote>
<p>Dass die Seite beim Neuladen an der Stelle bleibt wo sie war, dürfte am <strong>Browser</strong> liegen, der es sich gewissermaßen <em>merkt</em>, bis wohin die Seite gescrollt war. – <em>„It's not a bug, it's a feature!“</em></p>
<p>Nun hast du aber in deinem HTML die Zeile <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#index<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Start<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code>, die dafür sorgt, dass zunächst mal der <em>erste</em> Link in deinem Menü eingefärbt ist – was an und für sich auch sinnvoll ist, aber hier nun dazu führt, dass die Position in der Seite nach dem Neuladen mit der Link-Farbe nicht mehr übereinstimmt.</p>
<p>Du könntest nun natürlich <em>erzwingen</em>, dass die Seite nach dem Laden automatisch an den Anfang springt, wenn sie dort nicht schon ist, aber ich glaube es wäre <em><strong>besser</strong></em>, einfach die Farbe der Links entsprechend anzupassen.</p>
<p>Dazu bräuchtest du denke ich im Grunde nur beim Start die Funktion <code>onScroll</code> <em>manuell</em> aufrufen, wobei du diesen Aufruf in deine Handlerfunktion für <code>DOMContentLoaded</code> integrieren könntest:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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 function">onScroll</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <-- manueller Aufruf beim Start</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth <span class="token operator"><</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'a.fancybox'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> len <span class="token operator">=</span> a<span class="token punctuation">.</span>length<span class="token punctuation">,</span> i<span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Habe es natürlich nicht getestet, aber das <em>sollte</em> funktionieren. ;-)</p>
<p>Viele Grüße,</p>
<p>Orlok</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654653#m1654653mely2015-11-16T13:58:41Z2015-11-16T13:58:41ZJavascript fehler<blockquote>
<p>Hallo Mely</p>
<p>Erstmal sorry, dass ich auf <a href="https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654350#m1654350" rel="noopener noreferrer">deine andere Frage</a> bisher noch nicht geantwortet habe. ;-)</p>
</blockquote>
<p>Hallo, kein Problem :)</p>
<blockquote>
<p>Du wolltest wissen, wie ich darauf gekommen bin, dass das Problem mit den von mir genannten Anweisungen zusammenhängen könnte…</p>
<p>Naja, da gibt es nicht viel dazu zu sagen:</p>
<ul>
<li>
<p>Die zu dem Wert von <code class="language-javascript">$target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top</code> hinzugezählten ‚+2‘ wurden in deiner Funktion <code>onScroll</code> <em>nicht</em> berücksichtigt und erschienen mir davon abgesehen auch grundsätzlich sinnlos.</p>
</li>
<li>
<p>Die <code class="language-javascript"><span class="token keyword">else</span></code>-Anweisung wiederum schien auf den ersten Blick die einzig logische Ursache dafür zu sein, dass das mit der Link-Farbe nicht funktioniert hat, denn in deinem <code>click</code>-Handler hattest du ja die Anweisung <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span></code> notiert, die <em>eigentlich</em> dafür sorgen sollte, dass der Link auch entsprechend eingefärbt wird. Es musste darum an deinem <code>scroll</code>-Handler liegen, der jedesmal (<code class="language-javascript"><span class="token keyword">else</span></code>), wenn die <code class="language-javascript"><span class="token keyword">if</span></code>-Bedingung <em>nicht</em> greift, automatisch die Klasse (<em>und somit die Farbe</em>) weggenommen hat.</p>
</li>
</ul>
<blockquote>
<p>Gerade merke ich, dass das Problem ist zwar behoben, aber dass es neue Problem dadurch entsteht. Und zwar, dass wenn man die Seite neuladet mit F5 die Seite bleibt wo sie war, aber die Linkfarbe springt zu der Start.</p>
</blockquote>
<p>Dass die Seite beim Neuladen an der Stelle bleibt wo sie war, dürfte am <strong>Browser</strong> liegen, der es sich gewissermaßen <em>merkt</em>, bis wohin die Seite gescrollt war. – <em>„It's not a bug, it's a feature!“</em></p>
<p>Nun hast du aber in deinem HTML die Zeile <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#index<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Start<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code>, die dafür sorgt, dass zunächst mal der <em>erste</em> Link in deinem Menü eingefärbt ist – was an und für sich auch sinnvoll ist, aber hier nun dazu führt, dass die Position in der Seite nach dem Neuladen mit der Link-Farbe nicht mehr übereinstimmt.</p>
<p>Du könntest nun natürlich <em>erzwingen</em>, dass die Seite nach dem Laden automatisch an den Anfang springt, wenn sie dort nicht schon ist, aber ich glaube es wäre <em><strong>besser</strong></em>, einfach die Farbe der Links entsprechend anzupassen.</p>
<p>Dazu bräuchtest du denke ich im Grunde nur beim Start die Funktion <code>onScroll</code> <em>manuell</em> aufrufen, wobei du diesen Aufruf in deine Handlerfunktion für <code>DOMContentLoaded</code> integrieren könntest:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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 function">onScroll</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <-- manueller Aufruf beim Start</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth <span class="token operator"><</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'a.fancybox'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> len <span class="token operator">=</span> a<span class="token punctuation">.</span>length<span class="token punctuation">,</span> i<span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Habe es natürlich nicht getestet, aber das <em>sollte</em> funktionieren. ;-)</p>
</blockquote>
<p>Ich habe die onScroll manuel hinzugefügt, aber iwie ist er wieder nicht ganz richtig. Er springt sogar manchmal in der falsche Stelle z.B wenn ich auf Test4 Linkmenü klicke er springt dahin, macht er aber die Linkfarbe bei Test3 grün. Und er springt immer noch manchmal zu Anfang siehe <a href="http://mely.bplaced.net/webseite/test.html#index" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p>
<p>Grüße,
mely</p>
<blockquote>
<p>Viele Grüße,</p>
<p>Orlok</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654913#m1654913Orlok2015-11-18T16:48:48Z2015-11-18T16:48:48ZJavascript fehler<p>Hallo @mely</p>
<blockquote>
<p>Ich habe die onScroll manuell hinzugefügt, aber irgendwie ist er wieder nicht ganz richtig. Er springt sogar manchmal in der falsche Stelle z.B wenn ich auf Test4 Linkmenü klicke er springt dahin, macht er aber die Linkfarbe bei Test3 grün. Und er springt immer noch manchmal zu Anfang siehe <a href="http://mely.bplaced.net/webseite/test.html#index" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p>
</blockquote>
<p>Also. Zunächst mal wäre es wahrscheinlich eine gute Sache, statt die Funktion <code>onScroll</code> nach dem Laden des Dokumentes <em>immer</em> auszuführen, dies nur zu tun, wenn die Seite auch tatsächlich <em>neu</em> geladen und vom Browser automatisch gescrollt wurde, weshalb du es vielleicht besser so schreiben solltest:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">onScroll</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">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Davon abgesehen würde ich empfehlen zu versuchen, die <code class="language-javascript"><span class="token keyword">if</span></code>-Bedingung in deiner Funktion <code>onScroll</code> mal anders zu formulieren:</p>
<pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span>refElement<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator"><=</span> scrollPosition <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav ul li a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
currentLink<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Das sieht zwar nicht besonders elegant aus, sollte jetzt aber eigentlich funktionieren, und was den Unterschied zwischen <code class="language-javascript"><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-javascript"><span class="token function">position</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> angeht, könntest du zum Beispiel <a href="http://api.jquery.com/offset/" rel="nofollow noopener noreferrer">hier</a> mal nachsehen.</p>
<p>Darüber hinaus ist mir auch aufgefallen, dass du in deinem <code>click</code>-Handler noch eine globale Variable produzierst, wo du eigentlich überhaupt keine Variable bräuchtest:</p>
<pre><code class="block language-javascript">$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Die Zeile kannst du eigentlich löschen und dann bei der Wertzuweisung zwei Zeilen weiter unten direkt Folgendes schreiben:</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top
</code></pre>
<p>Schließlich noch ein kleiner Hinweis zu deiner Antwort: Bitte versuche in Zukunft Vollzitate zu vermeiden und nur die Teile zu zitieren, auf die du dich auch wirklich beziehst. ;-)</p>
<p>Viele Grüße,</p>
<p>Orlok</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654969#m1654969mely2015-11-19T11:25:20Z2015-11-19T11:25:20ZJavascript fehler<blockquote>
<p>Hallo @mely</p>
<blockquote>
<p>Ich habe die onScroll manuell hinzugefügt, aber irgendwie ist er wieder nicht ganz richtig. Er springt sogar manchmal in der falsche Stelle z.B wenn ich auf Test4 Linkmenü klicke er springt dahin, macht er aber die Linkfarbe bei Test3 grün. Und er springt immer noch manchmal zu Anfang siehe <a href="http://mely.bplaced.net/webseite/test.html#index" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p>
</blockquote>
<p>Also. Zunächst mal wäre es wahrscheinlich eine gute Sache, statt die Funktion <code>onScroll</code> nach dem Laden des Dokumentes <em>immer</em> auszuführen, dies nur zu tun, wenn die Seite auch tatsächlich <em>neu</em> geladen und vom Browser automatisch gescrollt wurde, weshalb du es vielleicht besser so schreiben solltest:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">onScroll</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">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Davon abgesehen würde ich empfehlen zu versuchen, die <code class="language-javascript"><span class="token keyword">if</span></code>-Bedingung in deiner Funktion <code>onScroll</code> mal anders zu formulieren:</p>
<pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span>refElement<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator"><=</span> scrollPosition <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav ul li a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
currentLink<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Das sieht zwar nicht besonders elegant aus, sollte jetzt aber eigentlich funktionieren, und was den Unterschied zwischen <code class="language-javascript"><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-javascript"><span class="token function">position</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> angeht, könntest du zum Beispiel <a href="http://api.jquery.com/offset/" rel="nofollow noopener noreferrer">hier</a> mal nachsehen.</p>
<p>Darüber hinaus ist mir auch aufgefallen, dass du in deinem <code>click</code>-Handler noch eine globale Variable produzierst, wo du eigentlich überhaupt keine Variable bräuchtest:</p>
<pre><code class="block language-javascript">$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Die Zeile kannst du eigentlich löschen und dann bei der Wertzuweisung zwei Zeilen weiter unten direkt Folgendes schreiben:</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top
</code></pre>
<p>Schließlich noch ein kleiner Hinweis zu deiner Antwort: Bitte versuche in Zukunft Vollzitate zu vermeiden und nur die Teile zu zitieren, auf die du dich auch wirklich beziehst. ;-)</p>
</blockquote>
<p>Hallo Orlok,</p>
<p>vielen Dank für dein Antwort. Ersmal es hat geklappt, verursacht aber andere Fehler <a href="http://mely.bplaced.net/webseite/test.html" rel="nofollow noopener noreferrer">siehe hier</a>.
Und was meintest du unter Vollzitate zu vermeiden? Ich verstehe es nicht.</p>
<p>Grüße,
mely</p>
<blockquote>
<p>Viele Grüße,</p>
<p>Orlok</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654977#m1654977Orlok2015-11-19T12:16:16Z2015-11-19T12:21:24ZJavascript fehler<p>Hallo mely</p>
<blockquote>
<p>vielen Dank für dein Antwort. Ersmal es hat geklappt, verursacht aber andere Fehler <a href="http://mely.bplaced.net/webseite/test.html" rel="nofollow noopener noreferrer">siehe hier</a>.</p>
</blockquote>
<p>Du hast mich hier gleich <em>zweimal</em> falsch verstanden. ;-)</p>
<p>Zunächst einmal hast du zwar wie von mir empfohlen die Zeile <code class="language-javascript">$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span></code> gelöscht, dann aber vergessen, die Zuweisung zwei Zeilen weiter unten <em>auch</em> anzupassen:</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token comment">// und nicht $target.offset( ).top ! :-)</span>
</code></pre>
<p>Dazu hast du in deiner Handlerfunktion für <code>DOMContentLoaded</code> die <code class="language-javascript"><span class="token keyword">if</span></code>-Anweisung die da <em>vorher</em> drin stand gelöscht und alles in den Block der neuen Anweisung geschrieben, aber ich meinte, dass du <strong>nur</strong> den Funktionsaufruf von <code>onScroll</code> von der Bedingung abhängig machen solltest, dass die Seite nach dem Neuladen automatisch gescrollt wurde:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">onScroll</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth <span class="token operator"><</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'a.fancybox'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> len <span class="token operator">=</span> a<span class="token punctuation">.</span>length<span class="token punctuation">,</span> i<span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Der <em>andere</em> <code class="language-javascript"><span class="token keyword">if</span></code>-Anweisung kann doch ruhig so bleiben wie sie war, das ist ja eine andere Baustelle.</p>
<blockquote>
<p>Und was meintest du unter Vollzitate zu vermeiden? Ich verstehe es nicht.</p>
</blockquote>
<p>Du zitierst immer den <strong>kompletten Beitrag</strong>, auf den du antwortest. Das nennt man ‚Vollzitat‘ und das erschwert das Lesen deiner Beiträge, also bitte vermeide das, indem du die Teile des Beitrags, auf die du dich <em>nicht</em> konkret beziehst, aus deiner Antwort <em>löschst</em>, so wie ich hier in <em>diesem</em> Beitrag ja auch nur einen <strong>bestimmten Teil</strong> <em>deines</em> Beitrags zitiere. ;-)</p>
<p>Viele Grüße,</p>
<p>Orlok</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654990#m1654990mely2015-11-19T13:23:51Z2015-11-19T13:28:00ZJavascript fehler<blockquote>
<p>Hallo mely</p>
<blockquote>
<p>vielen Dank für dein Antwort. Ersmal es hat geklappt, verursacht aber andere Fehler <a href="http://mely.bplaced.net/webseite/test.html" rel="nofollow noopener noreferrer">siehe hier</a>.</p>
</blockquote>
<p>Du hast mich hier gleich <em>zweimal</em> falsch verstanden. ;-)</p>
<p>Zunächst einmal hast du zwar wie von mir empfohlen die Zeile <code class="language-javascript">$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span></code> gelöscht, dann aber vergessen, die Zuweisung zwei Zeilen weiter unten <em>auch</em> anzupassen:</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token comment">// und nicht $target.offset( ).top ! :-)</span>
</code></pre>
</blockquote>
<p>Hallo,
ich schäme mich eigentlich nochmal zu fragen, aber die Zeile</p>
<pre><code class="block language-javascript">
<span class="token operator">></span> <span class="token string">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top
<span class="token operator">></span> <span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span>
ist<span class="token operator">/</span>war genau so und habe da nichts verändert<span class="token punctuation">.</span> Das ganze sieht so aus<span class="token operator">:</span>
<span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span>js
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</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 function">$</span><span class="token punctuation">(</span><span class="token string">".fancybox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fancybox</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">helpers</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">overlay</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">locked</span> <span class="token operator">:</span> <span class="token boolean">false</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 function">$</span><span class="token punctuation">(</span><span class="token string">".fancybox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</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 function">$</span><span class="token punctuation">(</span><span class="token string">".fancybox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fancybox</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">openEffect</span> <span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
<span class="token literal-property property">closeEffect</span> <span class="token operator">:</span> <span class="token string">'none'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#mobile-icon"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</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 function">$</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"navTest"</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 function">$</span><span class="token punctuation">(</span><span class="token string">".zoom-demo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">spritezoom</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">fadeInSpeed</span> <span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token literal-property property">fadeOutSpeed</span> <span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token comment">// general element fade out speed</span>
<span class="token literal-property property">behavior</span> <span class="token operator">:</span> <span class="token string">"hover"</span><span class="token punctuation">,</span>
<span class="token comment">// "inner", "top", "right", "bottom", "left", "magnify" or empty</span>
<span class="token literal-property property">layout</span> <span class="token operator">:</span> <span class="token string">"magnify"</span><span class="token punctuation">,</span>
<span class="token comment">// magnifying glass appearance</span>
<span class="token literal-property property">border</span> <span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token literal-property property">magSize</span> <span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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 function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"navTest"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onScroll</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> scrollPosition <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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">var</span> currentLink <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> refElement <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>currentLink<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"href"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>refElement<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator"><=</span> scrollPosition <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav ul li a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
currentLink<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"active"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">onScroll</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth <span class="token operator"><</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'a.fancybox'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> len <span class="token operator">=</span> a<span class="token punctuation">.</span>length<span class="token punctuation">,</span> i<span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<blockquote>
<p>Dazu hast du in deiner Handlerfunktion für <code>DOMContentLoaded</code> die <code class="language-javascript"><span class="token keyword">if</span></code>-Anweisung die da <em>vorher</em> drin stand gelöscht und alles in den Block der neuen Anweisung geschrieben, aber ich meinte, dass du <strong>nur</strong> den Funktionsaufruf von <code>onScroll</code> von der Bedingung abhängig machen solltest, dass die Seite nach dem Neuladen automatisch gescrollt wurde:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">onScroll</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth <span class="token operator"><</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'a.fancybox'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> len <span class="token operator">=</span> a<span class="token punctuation">.</span>length<span class="token punctuation">,</span> i<span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>hier habe dich ja ganz falsch verstanden:/</p>
<blockquote>
<p>Der <em>andere</em> <code class="language-javascript"><span class="token keyword">if</span></code>-Anweisung kann doch ruhig so bleiben wie sie war, das ist ja eine andere Baustelle.</p>
<blockquote>
<p>Und was meintest du unter Vollzitate zu vermeiden? Ich verstehe es nicht.</p>
</blockquote>
<p>Du zitierst immer den <strong>kompletten Beitrag</strong>, auf den du antwortest. Das nennt man ‚Vollzitat‘ und das erschwert das Lesen deiner Beiträge, also bitte vermeide das, indem du die Teile des Beitrags, auf die du dich <em>nicht</em> konkret beziehst, aus deiner Antwort <em>löschst</em>, so wie ich hier in <em>diesem</em> Beitrag ja auch nur einen <strong>bestimmten Teil</strong> <em>deines</em> Beitrags zitiere. ;-)</p>
</blockquote>
<p>Ok, ich versuche es zu ändern :)</p>
<blockquote>
<p>Viele Grüße,</p>
<p>Orlok</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1654999#m1654999Orlok2015-11-19T13:50:21Z2015-11-19T13:52:34ZJavascript fehler<p>Hallo mely</p>
<blockquote>
<p>Ich schäme mich eigentlich nochmal zu fragen, aber die Zeile</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top
</code></pre>
<p>ist/war genau so und habe da nichts verändert.</p>
</blockquote>
<p>Schämen musst du dich für überhaupt nichts! Aber schau doch noch mal <em>genau</em> hin. :-)</p>
<blockquote>
<p>Das ganze sieht so aus:</p>
<pre><code class="block language-javascript"><span class="token comment">// ...</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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 function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"navTest"</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">// Semikolon vergessen → besser }); als nur })</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token comment">// Klammern vergessen → $(target).offset().top</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre>
</blockquote>
<p>Habe den Code mal ein wenig formatiert und die unwichtigen Teile rausgenommen.</p>
<p>Du hast bei der Zuweisung die <strong>Klammern</strong> vergessen: <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> ≠ <code class="language-javascript">$target</code></p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token comment">// → soll es heißen! ;-)</span>
</code></pre>
<p>Gruß,</p>
<p>Orlok</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655069#m1655069mely2015-11-19T20:33:39Z2015-11-19T20:33:39ZJavascript fehler<blockquote>
<p>Hallo mely</p>
<blockquote>
<p>Ich schäme mich eigentlich nochmal zu fragen, aber die Zeile</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>top
</code></pre>
<p>ist/war genau so und habe da nichts verändert.</p>
</blockquote>
<p>Schämen musst du dich für überhaupt nichts! Aber schau doch noch mal <em>genau</em> hin. :-)</p>
<blockquote>
<p>Das ganze sieht so aus:</p>
<pre><code class="block language-javascript"><span class="token comment">// ...</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</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 function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"navTest"</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">// Semikolon vergessen → besser }); als nur })</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span><span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token comment">// Klammern vergessen → $(target).offset().top</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre>
</blockquote>
<p>Habe den Code mal ein wenig formatiert und die unwichtigen Teile rausgenommen.</p>
</blockquote>
<p>Hey,
vielen Dank. Ich habe die Klammer wirklich übersehen.</p>
<blockquote>
<p>Du hast bei der Zuweisung die <strong>Klammern</strong> vergessen: <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> ≠ <code class="language-javascript">$target</code></p>
</blockquote>
<p>Ich bin noch nicht ganz gut in javascript und verstehe die Unterschied nicht. Kannst du es bitte kurz erklären. Danke</p>
<blockquote>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token comment">// → soll es heißen! ;-)</span>
</code></pre>
<p>Gruß,</p>
<p>Orlok</p>
</blockquote>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655111#m1655111woodfighter2015-11-20T10:43:23Z2015-11-25T20:52:50ZJavascript fehler<p>Tach,</p>
<blockquote>
<blockquote>
<p>Du hast bei der Zuweisung die <strong>Klammern</strong> vergessen: <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> ≠ <code class="language-javascript">$target</code></p>
</blockquote>
<p>Ich bin noch nicht ganz gut in javascript und verstehe die Unterschied nicht. Kannst du es bitte kurz erklären. Danke</p>
</blockquote>
<p>du hast einmal die Variable namens $target und dann hast du ein Object, das eigentlich jQuery (andere Frameworks machen das ähnlich) heißt, aber meistens über den kürzeren Namen $ angesprochen wird und dem target als Parameter übergeben wird $(target) kurz für jQuery(target).</p>
<p>mfg<br>
Woodfighter</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655155#m1655155Orlok2015-11-20T19:06:53Z2015-11-20T19:06:53ZJavascript fehler<p>Hallo mely</p>
<blockquote>
<blockquote>
<p>Du hast bei der Zuweisung die <strong>Klammern</strong> vergessen: <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> ≠ <code class="language-javascript">$target</code></p>
</blockquote>
<p>Ich bin noch nicht ganz gut in javascript und verstehe den Unterschied nicht.</p>
</blockquote>
<p>Kein Problem.</p>
<blockquote>
<p>Kannst du es bitte kurz erklären. Danke.</p>
</blockquote>
<p>Ich kann es zumindest mal versuchen. :-)</p>
<hr>
<p>Also, <em>kurz</em> gesagt, handelt es sich bei <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> um den Aufruf einer <strong>Funktion</strong> namens <code class="language-javascript">$</code>, bei welchem der Wert der zuvor definierten Variable mit dem Bezeichner <code>target</code> als Argument übergeben wird.</p>
<p>Die Angabe <code class="language-javascript">$target</code> wiederum ist in diesem Zusammenhang der Versuch, über diesen Bezeichner eine zuvor nicht deklarierte <strong>Variable</strong> zu referenzieren.</p>
<hr>
<p>Alles klar? Nein? – Ok.</p>
<p>Dann versuchen wir es lieber nochmal etwas ausführlicher! ;-)</p>
<p>Am besten schauen wir uns zunächst einmal den Teil deines Codes an um den es geht, und zwar in seiner ursprünglichen Form, <em>bevor</em> wir hier die in dieser Hinsicht relevanten Veränderungen vorgenommen haben:</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'nav a[href^="#"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
e<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 comment">// Die an dieser Stelle unwichtigen Anweisungen lasse ich mal weg…</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span>
$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'swing'</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>
window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash <span class="token operator">=</span> target<span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> onScroll<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Wie woodfighter <a href="https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655111#m1655111" rel="noopener noreferrer">bereits sagte</a>, ist das Dollarzeichen, also <code class="language-javascript">$</code>, kein Teil der Syntax von Javascript, sondern ein Bezeichner, also ein Name, über den <code>jQuery</code> angesprochen werden kann, also im Prinzip nichts anderes als wenn <em>du selbst</em> schreiben würdest:</p>
<pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">$</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// irgendwelche Anweisungen</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<p>Das bedeutet, <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> ist einfach nur der <strong>Aufruf einer Funktion</strong>. Wobei eine Funktion auch mit <em>Argumenten</em> aufgerufen werden kann, welche dann innerhalb der
<em>runden Klammern</em> notiert werden, mit denen du dem Browser sagst, <em>dass</em> die Funktion aufgerufen werden soll.</p>
<p>Stellen wir uns nur so als <strong>Beispiel</strong> einmal vor, wir hätten eine Funktion mit zwei <em>Parametern</em> notiert, <code>a</code> und <code>b</code>, und dem Bezeichner <code>add</code>, dann könnte das so aussehen:</p>
<pre><code class="block language-javascript"><span class="token comment">// Beispiel für Funktion mit Parametern</span>
<span class="token keyword">function</span> <span class="token function">add</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<p>Diese Funktion könnten wir nun aufrufen, indem wir zunächst den Bezeichner der Funktion notieren, also den Namen <code>add</code>, den wir ihr gegeben haben, und danach ein paar runde Klammern, mit denen wir unseren Wunsch zum Ausdruck bringen, dass die Funktion jetzt aufgerufen werden soll.</p>
<p>Innerhalb dieser runden Klammern notieren wir nun durch Komma getrennt zwei Werte, das heißt, wir rufen die Funktion mit zwei Argumenten auf, und den Rückgabewert der Funktion, also das Ergebnis der Addition, die wir nach der <code class="language-javascript"><span class="token keyword">return</span></code>-Anweisung aufgeschrieben haben, speichern wir in einer Variable mit dem Bezeichner <code>c</code>:</p>
<pre><code class="block language-javascript"><span class="token comment">// Beispiel für Funktionsaufruf mit Argumenten</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>In der Variable mit dem Bezeichner <code>c</code> wäre nun also der Wert <code>8</code> gespeichert, da innerhalb unserer Funktion <code>add</code> die beiden Parameter mit den beim Aufruf der Funktion übergebenen Argumenten initialisiert werden, also <code>a</code> mit <code>3</code> und <code>b</code> mit <code>5</code>.</p>
<p>Wenn wir nun also zu deinem Code zurückkommen, sehen wir, dass du innerhalb deiner anonymen, also namenlosen Funktion, die du der <code>jQuery</code>-Methode ‚<code>on</code>‘ als zweites Argument nach <code class="language-javascript"><span class="token string">'click'</span></code> übergibst, die Anweisung <code class="language-javascript"><span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash</code> notiert hast.</p>
<p>Ohne an dieser Stelle zu weit abschweifen zu wollen sei gesagt, dass die Funktionsvariable <code class="language-javascript"><span class="token keyword">this</span></code> innerhalb <em>dieser</em> Funktion bei ihrem Aufruf mit dem Link initialisiert wird, auf den geklickt wurde, beziehungsweise mit dem <strong>Objekt</strong>, welches dieses Link-Element <em>repräsentiert</em>.</p>
<p>In der Variable mit dem Bezeichner <code>target</code> wird also der Wert der Objekteigenschaft <code>hash</code> hinterlegt, der <em>hier</em> identisch ist mit dem in deinem Markup angegebenen Wert des Attributes <code class="language-javascript">href</code>. Also, um das nochmal zu verdeutlichen – du hast in deinem Markup folgenden internen Link…</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</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>Nav - Test 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
</code></pre>
<p>…und über <code>jQuery</code> hast du nun eine Ereignisüberwachung für deine Links und den Ereignistyp ‚click‘ implementiert, das heißt, sollte jemand nun auf diesen Link klicken, dann würde in der Variable <code>target</code> der String <code class="language-javascript"><span class="token string">'#test1'</span></code> gespeichert werden. Und <em>diesen</em> String übergibst du nun <code>jQuery</code>, indem du schreibst…</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span>
</code></pre>
<p>…damit <code>jQuery</code> dir anhand der <strong>ID</strong> das Element heraussucht, welches das Ziel (<em>target</em>) deines Links ist, und dir ein <strong>Objekt</strong> zurückgibt, auf welchem du von <code>jQuery</code> bereitgestellte Methoden anwenden kannst, wie beispielsweise <code class="language-javascript"><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>, welche selbst wiederum ein Objekt mit Eigenschaften wie etwa <code>top</code> zurückgibt, deren Wert in diesem Teil deines Codes dann <em>zugewiesen</em> wird (oder <em>werden sollte</em>):</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top
</code></pre>
<p>Du hast das mit den <strong>Objekten</strong> noch nicht so ganz verstanden?</p>
<hr>
<p>Kein Problem. ;-)</p>
<p>Ein <em>plain object</em>, also ein ‚normales‘ Objekt wenn man so will, ist eine Datenstruktur, sprich es ist ein Container für Eigenschaften und Methoden, welcher aus Schlüssel/Wert-Paaren besteht, wobei von einer Methode gesprochen wird, wenn es sich bei dem Wert der Eigenschaft um eine Funktion handelt.</p>
<p>Es gibt nun verschiedene Möglichkeiten ein solches Objekt zu erzeugen, aber am besten sollte dies über die sogenannte Literalnotation geschehen:</p>
<pre><code class="block language-javascript"><span class="token keyword">var</span> object <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">property</span> <span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
<span class="token function-variable function">method</span> <span class="token operator">:</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">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>property<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<p>Hier haben wir also zunächst einmal eine Variable mit dem Bezeichner <code>object</code> deklariert und diese zugleich auf definiert, indem wir ihr ein neu erstelltes <strong>Objekt</strong> als Wert zugewiesen haben.</p>
<p>Die Syntax zur Erzeugung eines Objektes besteht also darin, zwischen zwei geschweiften Klammern und durch Kommas getrennt die Eigenschaften aufzulisten, wobei der Bezeichner, also der Name der Eigenschaft zuerst notiert wird, dann ein Doppelpunkt, und dann der Wert, den die Eigenschaft haben soll.</p>
<p>In unserem Beispiel <code>object</code> haben wir nun zwei Eigenschaften hinterlegt, wobei eine davon als Wert eine Funktion hat, so dass wir hier von einer Methode sprechen. Innerhalb dieser Funktion verweist bei ihrem Aufruf die Variable <code class="language-javascript"><span class="token keyword">this</span></code> nun auf das Objekt selbst, so dass der Wert der ersten Eigenschaft mit den Namen <code>property</code> zurückgegeben wird, also der String <code class="language-javascript"><span class="token string">'value'</span></code>.</p>
<p>Wenn man also ein Objekt erstellt hat, dann gibt es zwei Wege, um auf dessen Eigenschaften zuzugreifen, nämlich entweder über die <em>Punktnotation</em> oder über die <em>Klammernotation</em>:</p>
<pre><code class="block language-javascript"><span class="token keyword">var</span> myValue <span class="token operator">=</span> object<span class="token punctuation">.</span>property<span class="token punctuation">;</span>
<span class="token comment">// ist also das gleiche wie:</span>
<span class="token keyword">var</span> myValue <span class="token operator">=</span> object<span class="token punctuation">[</span><span class="token string">'property'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
<p>In beiden Fällen wäre nun der Wert der Eigenschaft <code>property</code> in der Variable mit dem Bezeichner <code>myValue</code> hinterlegt. Aber, auch wenn beide Varianten funktionieren, sollte der besseren Lesbarkeit wegen <em>wenn möglich</em> die Punktnotation verwendet werden. ;-)</p>
<p>Jedenfalls kann ein Objekt natürlich nicht nur als Wert einer Variable hinterlegt werden, sondern es kann auch direkt beim Aufruf einer Funktion notiert werden, wie zum Beispiel bei folgendem Methodenaufruf, den ich mal deiner Datei <code>script.js</code> entnommen habe:</p>
<pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".zoom-demo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">spritezoom</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">fadeInSpeed</span> <span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token literal-property property">fadeOutSpeed</span> <span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token literal-property property">behavior</span> <span class="token operator">:</span> <span class="token string">"hover"</span><span class="token punctuation">,</span>
<span class="token literal-property property">layout</span> <span class="token operator">:</span> <span class="token string">"magnify"</span><span class="token punctuation">,</span>
<span class="token literal-property property">border</span> <span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token literal-property property">magSize</span> <span class="token operator">:</span> <span class="token number">0.8</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Das ist eine sehr nützliche Möglichkeit, um einer Funktion bei ihrem Aufruf Werte mitzugeben, insbesondere dann, wenn sehr viele Parameter benötigt werden, denn sonst müsste man sich immer die genaue Reihenfolge merken, in der die Argumente zu übergeben sind. So übergibt man nur ein Objekt, also ein Argument, und innerhalb der Funktion können dann die einzelnen Eigenschaftswerte ausgelesen werden.</p>
<p>Andersherum kann ein Objekt natürlich auch der Rückgabewert einer Funktion sein, was zum Beispiel so umgesetzt werden kann:</p>
<pre><code class="block language-javascript"><span class="token keyword">var</span> <span class="token function-variable function">getObject</span> <span class="token operator">=</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">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">a</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">b</span> <span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token literal-property property">c</span> <span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<p>Dabei ist allerdings zu beachten, dass die öffnende geschweifte Klammer für das Objekt in der selben Zeile wie die <code class="language-javascript"><span class="token keyword">return</span></code>-Anweisung stehen muss, da sonst durch die automatische Einfügung eines Semikolons die Ausführung der Funktion nach dieser Anweisung abgebrochen würde und der Code mit dem Objekt nicht mehr erreicht würde.</p>
<p>Das nur nebenbei bemerkt. ;-)</p>
<hr>
<p>Aber kommen wir wieder zurück zu deinem <em>ursprünglichen</em> Code:</p>
<pre><code class="block language-javascript"> <span class="token comment">// ...</span>
$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top
<span class="token comment">// ...</span>
</code></pre>
<p>Das war die Stelle, an der ich dir empfohlen hatte, die Variablenzuweisung zu löschen und statt dessen den Funktionsaufruf direkt bei der Zuweisung zu notieren, da du hier nicht nur eine <em><strong>globale Variable</strong></em> produziert hast, sondern darüber hinaus an diesem Punkt eigentlich überhaupt keine Variablendefinition notwendig war. Denn du verwendest den entsprechenden Rückgabewert von <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> ja ohnehin nur <em>einmal</em>, nämlich bei eben jener Zuweisung ein paar Zeilen weiter.</p>
<p>Nun hattest du zwar die Zeile <code class="language-javascript">$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span></code> wie angeraten gelöscht, aber eben vergessen, bei der Wertzuweisung weiter unten <code class="language-javascript">$target</code> durch <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> zu ersetzen, mit der Folge, dass dir dein Script beim Klick auf einen Link mit einen <em>Reference Error</em> um die Ohren geflogen ist, da nach der Löschung natürlich keine Variable mit dem Bezeichner <code class="language-javascript">$target</code> mehr vorhanden war.</p>
<p>Du möchtest nun vielleicht etwas genauer wissen, <em><strong>warum</strong></em> ich dir das empfohlen habe?</p>
<p>Ok. :-)</p>
<p>Ich nehme an, du hast sicherlich verstanden, dass es nicht besonders sinnvoll ist, einen Wert extra in einer Variablen zu hinterlegen, wenn man ihn ohnehin nur an <em>einer einzigen</em> Stelle benötigt, aber zur Verdeutlichung vielleicht nochmal ein kleines <strong>Beispiel</strong>:</p>
<pre><code class="block language-javascript"><span class="token keyword">var</span> $target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> offset <span class="token operator">=</span> $target<span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> top <span class="token operator">=</span> offset<span class="token punctuation">.</span>top<span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> top
</code></pre>
<p>Theoretisch hättest du das ganze auch so notieren können, also zunächst einmal den Rückgabewert von <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span></code> in der Variable mit dem Bezeichner <code class="language-javascript">$target</code> speichern, dann auf diesem Objekt die Methode <code>offset()</code> aufrufen und <em>deren</em> Rückgabewert in einer Variable mit dem Bezeichner <code>offset</code> hinterlegen, um dann schließlich von <em>diesem</em> Objekt die Eigenschaft <code>top</code> auszulesen, deren Wert dann wiederum einer dritten Variablen zugewiesen wird, also <code>top</code>.</p>
<p>Ziemlich umständlich oder?</p>
<pre><code class="block language-javascript"><span class="token string-property property">'scrollTop'</span> <span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top
</code></pre>
<p>…ist da doch offensichtlich die deutlich elegantere Schreibweise, würde ich meinen. ;-)</p>
<p>Naja, und dann ist da natürlich noch die Sache mit der <em><strong>globalen Variable</strong></em>.</p>
<p>Zur Erinnerung, du hattest geschrieben:</p>
<pre><code class="block language-javascript">$target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Du hast hier also eine Variable erzeugt, <em>ohne</em> das Keyword <code class="language-javascript"><span class="token keyword">var</span></code> zu verwenden, sondern einfach nur, indem du einen Bezeichner, also einen Namen notiert und dann einen Wert zugewiesen hast. Und das ist schlecht. Denn auf diese Weise wird die Variable auch <em>außerhalb</em> deiner Funktion, also <em>überall</em> in deinem Script „sichtbar“ und kann entsprechend überschrieben werden beziehungsweise eine <em>andere</em> globale Variable mit demselben Bezeichner überschreiben!</p>
<hr>
<p>Also das war jetzt eine Menge Information, aber keine Sorge, wenn du nicht <em>alles</em> direkt verstanden hast! Jedenfalls, wenn du JavaScript lernen willst, würde ich empfehlen, einfach mal ins <a href="https://wiki.selfhtml.org/wiki/JavaScript" rel="nofollow noopener noreferrer">SELFHTML-Wiki</a> zu schauen. :-)</p>
<p>Viele Grüße,</p>
<p>Orlok</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655665#m1655665mely2015-11-25T20:52:40Z2015-11-25T20:52:40ZJavascript fehler<p>Hallo,
das waren wirklich ganz viele Informationen. Ich bedanke mich für deine Mühe, dass du alles so fein beschrieben hast.
Danke :)</p>
<p>grüße,
mely</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655790#m1655790Msass2015-11-27T09:12:42Z2015-11-27T09:12:42ZJavascript fehler<blockquote>
<p>Also das war jetzt eine Menge Information, aber keine Sorge, wenn du nicht <em>alles</em> direkt verstanden hast! Jedenfalls, wenn du JavaScript lernen willst, würde ich empfehlen, einfach mal ins <a href="https://wiki.selfhtml.org/wiki/JavaScript" rel="nofollow noopener noreferrer">SELFHTML-Wiki</a> zu schauen. :-)</p>
<p>Viele Grüße,</p>
<p>Orlok</p>
</blockquote>
<p>Ich kann zwar noch keine Beiträge bewerten, aber wenn ichs könnte, hätte ich hier ein + gegeben :D</p>
https://forum.selfhtml.org/self/2015/nov/13/javascript-fehler/1655795#m1655795Tabellenkalk2015-11-27T09:39:51Z2015-11-27T09:39:51ZJavascript fehler<p>Hallo,</p>
<blockquote>
<p>Ich kann zwar noch keine Beiträge bewerten</p>
</blockquote>
<p>Der Zustand ändert sich in Kürze.</p>
<p>Gruß<br>
Kalk</p>