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>