tag:forum.selfhtml.org,2005:/self Problem bei meinem ersten JavaScript Script – SELFHTML-Forum 2011-11-22T10:47:06Z https://forum.selfhtml.org/self/2011/nov/21/problem-bei-meinem-ersten-javascript-script/1533261#m1533261 Japh 2011-11-21T18:47:08Z 2011-11-21T18:47:08Z Problem bei meinem ersten JavaScript Script <p>Hallo,<br> ich habe versucht einen "Style-Wechsler" zu programmieren.</p> <p>Er macht aber nicht unbedingt das was er soll.</p> <p>Vielleicht könnt ihr mir ja helfen.</p> <pre><code class="block language-html"> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html; charset=utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></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>style1.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> [code lang=javascript] <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span> <span class="token string">'css'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">style1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> style<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> style<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span> <span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'style1.css'</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">style2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> style<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> style<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span> <span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'style2.css'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p></head><br> <body><br> <h1>Überschrift</h1></p> <pre><code><a href="" onClick="style1();" >Style 1</a> <a href="" onClick="style2();" >Style 2</a> </code></pre> <p></body><br> </html></p> <p>[/code]</p> https://forum.selfhtml.org/self/2011/nov/21/problem-bei-meinem-ersten-javascript-script/1533262#m1533262 Don P 2011-11-21T20:53:17Z 2011-11-21T20:53:17Z Problem bei meinem ersten JavaScript Script <p>Hallo,</p> <blockquote> <p>Er macht aber nicht unbedingt das was er soll.</p> </blockquote> <p>Sondern was?</p> <p>Verweis-Elemente mit leerem Verweisziel und onclick sind keine gute Idee.<br> Beim Klicken wollen die natürlich immer ihr Verweisziel anspringen bzw. laden. Womöglich wird ohne Verweisziel einfach dass aktuelle Dokument neu geladen, so dass die Style-Änderung sofort wieder verloren geht.</p> <p>Zum boßen Draufklicken nimm' lieber Buttons, und alles wird gut:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html; charset=utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></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>style1.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token punctuation">[</span>code lang<span class="token operator">=</span>javascript<span class="token punctuation">]</span> <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span> <span class="token string">'css'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">style1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> style<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> style<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span> <span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'style1.css'</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">style2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> style<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> style<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span> <span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'style2.css'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Überschrift<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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><span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">style1();</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">{</span><span class="token operator">:</span><span class="token punctuation">.</span>language<span class="token operator">-</span>javascript<span class="token punctuation">}</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Style 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <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><span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">style2();</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">{</span><span class="token operator">:</span><span class="token punctuation">.</span>language<span class="token operator">-</span>javascript<span class="token punctuation">}</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Style 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">style1();</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">{</span><span class="token operator">:</span><span class="token punctuation">.</span>language<span class="token operator">-</span>javascript<span class="token punctuation">}</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Style 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">style2();</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">{</span><span class="token operator">:</span><span class="token punctuation">.</span>language<span class="token operator">-</span>javascript<span class="token punctuation">}</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Style 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> [/code] Übrigens muss man hier nicht unbedingt setAttribute und removeAttribute bemühen, eine simple Zuweisung `style.href='myStyle';`{:.language-javascript} tut' auch. Gruß, Don P </code></pre> https://forum.selfhtml.org/self/2011/nov/21/problem-bei-meinem-ersten-javascript-script/1533263#m1533263 Japh 2011-11-22T10:47:06Z 2011-11-22T10:47:06Z Problem bei meinem ersten JavaScript Script <blockquote> <p>Hallo,</p> <blockquote> <p>Er macht aber nicht unbedingt das was er soll.</p> </blockquote> <p>Sondern was?</p> <p>Verweis-Elemente mit leerem Verweisziel und onclick sind keine gute Idee.<br> Beim Klicken wollen die natürlich immer ihr Verweisziel anspringen bzw. laden. Womöglich wird ohne Verweisziel einfach dass aktuelle Dokument neu geladen, so dass die Style-Änderung sofort wieder verloren geht.</p> <p>Zum boßen Draufklicken nimm' lieber Buttons, und alles wird gut:</p> <pre><code class="block language-html"></code></pre> </blockquote> <p><!DOCTYPE HTML></p> <blockquote> <p><html><br>     <head><br>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p> <p><title>Test</title><br>         <link id="css" rel="stylesheet" type="text/css" href="style1.css" /></p> <p><script><br> [code lang=javascript]            var  style = document.getElementById( 'css' );<br>             function style1(){<br>                 style.removeAttribute( 'href' );<br>                 style.setAttribute( 'href', 'style1.css' );<br>             }<br>             function style2(){<br>                 style.removeAttribute( 'href' );<br>                 style.setAttribute( 'href', 'style2.css' );<br>             }</p> </blockquote> <pre><code class="block language-</script>"> >     </head> >     <body> >         <h1>Überschrift</h1> > >         <a href="" onClick="`style1();`{:.language-javascript}">Style 1</a> >         <a href="" onClick="`style2();`{:.language-javascript}">Style 2</a> > >         <button onClick="`style1();`{:.language-javascript}">Style 1</button> >         <button onClick="`style2();`{:.language-javascript}">Style 2</button> >     </body> > </html> > [/code] > > Übrigens muss man hier nicht unbedingt setAttribute und removeAttribute bemühen, eine simple Zuweisung `style.href='myStyle';`{:.language-javascript} tut' auch. > > Gruß, Don P > Danke schön. Klappt jetzt wunderbar. :) </code></pre>