tag:forum.selfhtml.org,2005:/self Bestimmtes script bei Seitenaufruf starten. – SELFHTML-Forum 2011-06-21T15:53:30Z https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512700?srt=yes#m1512700 Torsten Torsten.Andreas.Winkler@t-online.de 2011-06-19T11:00:20Z 2011-06-19T11:00:20Z Bestimmtes script bei Seitenaufruf starten. <p>Hallo,</p> <p>ich habe eine Seite auf welcher verschiedene Textbausteine ausgewählt und erst dann angezeigt werden sollen, hierbei sollen aber automatisch die ersten drei vorausgewählt sein. Bisher muss ich nun immer nochmal die Checkboxen anklicken damit etwas verändert wird.</p> <p>Das Script soll in einer eigenen Datei liegen, da die gleiche Funktion für mehrere Seiten benötigt wird.</p> <p>Hier mal die Seite und danach das Script in einer eigenen Datei:</p> <p><html><br> <head><br> <title></title><br> <b><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><br> <script type="text/javascript" src="script.js"></script><br> </head></p> <p><form id="meinFormular" id="meinFormular" method="get" action="#"><br>   <p>Welche Unterlagen werden benötigt</p><br>     <input type="checkbox" id="checkbox1" onclick="javascript:zeigeText1(this.id)" checked> Zuwendungsnachweis<br><br>     <input type="checkbox" id="checkbox2" onclick="javascript:zeigeText2(this.id)" checked> Agenda <br><br>     <input type="checkbox" id="checkbox3" onclick="javascript:zeigeText3(this.id)" checked> Einladung <br><br>     <input type="checkbox" id="checkbox4" onclick="javascript:zeigeText4(this.id)"> Checkliste Gesundheitsförderungsmaßnahmen<br><br>     <input type="checkbox" id="checkbox5" onclick="javascript:zeigeText5(this.id)"> Hinweis auf EMC-Tool <br><br>     </form><br> <br><br> Sehr geehrte Damen und Herren,<br><br> <br><br> bitte prüfen Sie diese Rechnung und fügen Sie für eine korrekte steuerliche Beurteilung folgende Unterlagen bei: <br><br> <font color="#FF0000"><br> <div id="ZWN"></div><br> <div id="Agenda"></div><br> <div id="Einladung"></div><br> <div id="Checkliste"></div><br> <div id="EMC"></div><br> </font><br> </body><br> </html></b></p> <p>Hier das Script:</p> <p>function zeigeText1 (objCheckbox) {<br>       if (document.getElementById(objCheckbox).checked == true){<br>          document.getElementById('ZWN').innerHTML = "<br>"+'Zuwendungsnachweis'<br>       } else {<br>           document.getElementById('ZWN').innerHTML = ''<br>       }</p> <p>}<br> function zeigeText2 (objCheckbox) {<br>       if (document.getElementById(objCheckbox).checked == true){<br>          document.getElementById('Agenda').innerHTML = "<br>"+'Agenda'<br>       } else {<br>           document.getElementById('Agenda').innerHTML = ''<br>       }</p> <p>}<br> function zeigeText3 (objCheckbox) {<br>       if (document.getElementById(objCheckbox).checked == true){<br>          document.getElementById('Einladung').innerHTML = "<br>"+'Einladung'<br>       } else {<br>           document.getElementById('Einladung').innerHTML = ''<br>       }</p> <p>}<br> function zeigeText4 (objCheckbox) {<br>       if (document.getElementById(objCheckbox).checked == true){<br>          document.getElementById('Checkliste').innerHTML = "<br>"+'Checkliste'<br>       } else {<br>           document.getElementById('Checkliste').innerHTML = ''<br>       }</p> <p>}<br> function zeigeText5 (objCheckbox) {<br>       if (document.getElementById(objCheckbox).checked == true){<br>          document.getElementById('EMC').innerHTML = "<br>"+'Hinweis EMC.'<br>       } else {<br>           document.getElementById('EMC').innerHTML = ''<br>       }</p> <p>}</p> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512702?srt=yes#m1512702 mrjerk 2011-06-19T12:42:26Z 2011-06-19T12:42:26Z Bestimmtes script bei Seitenaufruf starten. <p>Hallo,<br> Der <a href="http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload" rel="nofollow noopener noreferrer">Event-Handler onload</a> ist das was Du suchst.</p> <p>Etwa so:</p> <pre><code class="block language-html"> <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>title</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000000<span class="token punctuation">"</span></span> <span class="token attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FFFFFF<span class="token punctuation">"</span></span> <span class="token attr-name">link</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span> <span class="token attr-name">alink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span> <span class="token attr-name">vlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onload</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 keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">zeigeText1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">zeigeText2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">zeigeText3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Beachte, dass onload nur ausgeführt wird, wenn alle Elemente der Seite geladen sind. Wenn z.b. ein Bild fehlt, wird onload nicht ausgeführt.</p> <p>Viele Grüße,<br> Jörg</p> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512701?srt=yes#m1512701 Kai345 kai345@knrs.de http://knrs.de 2011-06-20T13:26:45Z 2011-06-20T13:26:45Z Bestimmtes script bei Seitenaufruf starten. <p>[latex]Mae  govannen![/latex]</p> <blockquote> <p><html><br> <head><br> <title></title><br> <b><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"></p> </blockquote> <p>[...]</p> <blockquote> <p></html></b></p> </blockquote> <p>Das ist Mist. Du schließt das body-Element und den schließenden html-Tag in ein b-Element ein und erzeugst dadurch eine unsinnige Verschachtelung. Entferne die Tags <b> und </b> rückstandlos. Weiterhin solltest du auch (aber das ist kein direkter Fehler) sämtlich Attribute des Body-Elements entfernen und die Darstellung rein per CSS lösen.</p> <blockquote> <p><form id="meinFormular" id="meinFormular" method="get" action="#"></p> </blockquote> <p>Du vergibst hier zwei Mal das Attribut "id", das ist nicht gestattet.</p> <blockquote> <p><p>Welche Unterlagen werden benötigt</p><br>     <input type="checkbox" id="checkbox1" onclick="javascript:zeigeText1(this.id)" checked> Zuwendungsnachweis<br><br>     <input type="checkbox" id="checkbox2" onclick="javascript:zeigeText2(this.id)" checked> Agenda <br><br>     <input type="checkbox" id="checkbox3" onclick="javascript:zeigeText3(this.id)" checked> Einladung <br><br>     <input type="checkbox" id="checkbox4" onclick="javascript:zeigeText4(this.id)"> Checkliste Gesundheitsförderungsmaßnahmen<br><br>     <input type="checkbox" id="checkbox5" onclick="javascript:zeigeText5(this.id)"> Hinweis auf EMC-Tool <br><br>     </form></p> </blockquote> <p>Sieht doch aus wie eine Liste, oder? Also auch als Liste auszeichnen.<br> Die IDs sind überflüssig und können komplett entfallen.<br> Der Text soll als Label-Element eine Beziehung zur jeweiligen Checkbox aufbauen.<br> Die Zeilenumbrüche entfallen.<br> Das Label javascript: ist unnötig, was in onxxxx-Attributen steht, ist immer[1] Javascript.<br> Die Checkboxen sollten durch ein gemeinsames Name-Attribut gruppiert werden.<br> Es muß nicht für jede Checkbox eine eigene Funktion definiert werden.</p> <p>Also bereinigen wir den Aufbau:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meinFormular<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meinFormular<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Welche Unterlagen werden benötigt?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unterlagen<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 function">zeigeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'ZWN'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> Zuwendungsnachweis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unterlagen<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 function">zeigeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'Agenda'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> Agenda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unterlagen<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 function">zeigeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'Einladung'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> Einladung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unterlagen<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 function">zeigeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'Checkliste'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> Checkliste Gesundheitsförderungsmaßnahmen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unterlagen<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 function">zeigeText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'EMC'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> Hinweis auf EMC-Tool<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p>Nun zum Javascript. Ich würde es vorerst (ist wahrscheinlich noch optimierbar) so lösen:</p> <p>(Aufgrund einiger Probleme mit meinem lokalen Server kann ich das gerade nicht selber testen, daher können Fehler drin sein)</p> <pre><code class="block language-javascript"> <span class="token comment">// Um globale Variablen möglichst zu minimieren, den gesamten Code in eine Funktion einschließen </span> <span class="token comment">// und diese direkt nach der Erstellung ausführen </span> <span class="token keyword">var</span> zeigeText <span class="token operator">=</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> texte <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">'ZWN'</span><span class="token operator">:</span> <span class="token string">'Zuwendungsnachweis'</span><span class="token punctuation">,</span> <span class="token string">'Agenda'</span><span class="token operator">:</span> <span class="token string">'Agenda'</span><span class="token punctuation">,</span> <span class="token string">'Einladung'</span><span class="token operator">:</span> <span class="token string">'Einladung'</span><span class="token punctuation">,</span> <span class="token string">'Checkliste'</span><span class="token operator">:</span> <span class="token string">'Checkliste'</span><span class="token punctuation">,</span> <span class="token string">'EMC'</span><span class="token operator">:</span> <span class="token string">'Hinweis EMC.'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Diese Funktionsreferenz wird an die Variable zeigeText zurückgegeben und bei Aufrufen von zeigeText() </span> <span class="token comment">// wird nur diese Funktion ausgeführt </span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> targId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// [link:http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=Ternärer Operator] statt if ... else </span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>targId<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'<br>'</span> <span class="token operator">+</span> texte<span class="token punctuation">[</span>targId<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token string">''</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> </code></pre> <p>... Wobei der HTML-Teil mit den Ziel-Divs und dem per JS eingefügten <br> durchaus auch noch sinnvoller gestaltet werden kann. (z.B. Liste).<br> Weiterhin sollten die onclick-Attribute entfallen und duch unobstrusive Javascript ersetzt werden, Elementreferenzen einmalig ermittelt werden (z.B. onload) und nicht bei jedem Funktions-Aufruf durch document.getElementById erneut, aber das würde glaube ich jetzt viel zu weit führen...</p> <blockquote> <p><br></p> </blockquote> <p>... wird in den seltesten Fällen benötigt, löse die Darstellung per CSS</p> <blockquote> <p><font color="#FF0000"></p> </blockquote> <p>...ist, wie die Attribute des body-Elements auch, veraltete Technik, durch CSS ersetzen.</p> <p>Stur lächeln und winken, Männer!<br> Kai</p> <div class="signature">-- <br> Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken<br> in Richtung "Mess up the Web".(<a href="https://forum.selfhtml.org/?t=197497&m=1324775" rel="noopener noreferrer">suit</a>)<br> <a href="http://selfhtml.knrs.de/#h_stylesheet" rel="nofollow noopener noreferrer">SelfHTML-Forum-Stylesheet</a> </div> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512703?srt=yes#m1512703 Torsten Torsten.Andreas.Winkler@t-online.de 2011-06-19T13:20:37Z 2011-06-19T13:20:37Z Bestimmtes script bei Seitenaufruf starten. <blockquote> <p>Hallo,<br> Der <a href="http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload" rel="nofollow noopener noreferrer">Event-Handler onload</a> ist das was Du suchst.</p> <p>Etwa so:</p> <pre><code class="block language-html"></code></pre> </blockquote> <blockquote> <p><html><br> <head><br> <title></title><br> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" onload="function () {zeigeText1(); zeigeText2(); zeigeText3();}"><br> ...<br> </body><br> </html></p> </blockquote> <pre><code class="block"> > > Beachte, dass onload nur ausgeführt wird, wenn alle Elemente der Seite geladen sind. Wenn z.b. ein Bild fehlt, wird onload nicht ausgeführt. > > Viele Grüße, > Jörg Hallo Jörg, danke für deine schnelle Antwort, auf onload war ich auch schon gekommen aber ich bekomme das dennoch nicht hin. Aber ich habe auch keine großen Erfahrungen im Bereich Java bzw. Html. Liegt dies evtl. daran, dass ich die Funktion der Checkboxen mit onclick auslöse und somit beim Aufruf der Seite nicht auf das in einer eigenen Datei liegende Script verwiesen wird? MFG Torsten </code></pre> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512704?srt=yes#m1512704 Der Martin self@kennst.net 2011-06-19T14:29:47Z 2011-06-19T14:29:47Z Bestimmtes script bei Seitenaufruf starten. <p>Hi,</p> <blockquote> <p>Aber ich habe auch keine großen Erfahrungen im Bereich Java bzw. Html.</p> </blockquote> <p>na, nur gut, dass es hier nicht um Java geht, sondern um Javascript. Und die beiden haben herzlich wenig miteinander zu tun. Man sollte deshalb darauf achten, das nicht zu verwechseln.</p> <blockquote> <p>Liegt dies evtl. daran, dass ich die Funktion der Checkboxen mit onclick auslöse und somit beim Aufruf der Seite nicht auf das in einer eigenen Datei liegende Script verwiesen wird?</p> </blockquote> <p>Ja ... ähm, nein. Es liegt schon daran, dass du erst mit dem onclick-Handler etwas tust. Beim Laden der Seite werden die Checkboxen zwar markiert ("checked"), aber es findet kein Klick statt, also wird die damit verknüpfte Aktion auch nicht ausgeführt.</p> <p>Du müsstest daher onload eine Funktion aufrufen, die alle onclick-Eventhandler der Reihe nach einmal aufruft. Du hast sie ja schon so geschrieben, dass sie den Checkbox-Status selbst ermitteln.</p> <p>Übrigens:</p> <blockquote> <p>if (document.getElementById(objCheckbox).checked == true)</p> </blockquote> <p>Das ist natürlich unnötig kompliziert: "Wenn es wahr ist, dass ... wahr ist, dann ..."<br> Die checked-Eigenschaft eines Checkbox-Objekts enthält doch selbst schon einen Wahrheitswert (Boolean), also genau das, was das if-Statement erwartet. Diesen Wert noch einmal mit true zu vergleichen, um letztendlich denselben Wert herauszubekommen, ist völlig überflüssig.<br> Stattdessen ist</p> <blockquote> <p>if (document.getElementById(objCheckbox).checked)</p> </blockquote> <p>nicht nur gleichbedeutend, sondern auch noch leichter zu lesen.</p> <p>Ach ja - für die fünf quasi gleichen Operationen fünf einzelne Funktionen zu schreiben, ist auch ineffizient. Da würde ich doch lieber die ID des zu verändernden Textblocks als zweiten Parameter übergeben, und an allen fünf Stellen dieselbe Funktion aufrufen.</p> <p>So long,<br>  Martin</p> <div class="signature">-- <br> Krankenschwester zum fassungslosen Vater von Drillingen: Nein, Sie sollen sich keins aussuchen! Alle drei sind Ihre!<br> Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( </div> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512711?srt=yes#m1512711 gast42 2011-06-20T04:50:31Z 2011-06-20T04:50:31Z Bestimmtes script bei Seitenaufruf starten. <p>prinzipelle Ergänzung:</p> <p>nutze statt</p> <p>onclick="javascript:zeigeText1(this.id)"</p> <p><code class="language-html">onclick="zeigeText1(this)"</code><br> (javascript: ist hier sowieso überflüssig)</p> <p>und spar dir so das getElementById:</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">zeigeText1</span> <span class="token punctuation">(</span><span class="token parameter">objCheckbox</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>objCheckbox<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token operator">...</span> </code></pre> <p>denn über this hast du bereits direkten Zugriff auf das betreffende Element, du musst es nicht erst wieder über die ID suchen (und dass ==true überflüssig ist, wurde ja schon gesagt).</p> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512705?srt=yes#m1512705 Torsten Torsten.Andreas.Winkler@t-online.de 2011-06-20T06:33:20Z 2011-06-20T06:33:20Z Automatisch einen Klick auf Checkbox erzeugen <p>Hallo,</p> <p>danke für die Antwort und die Hinweise welche ich auch bereits umgesetzt habe.</p> <p>Aber wie genau mach ich dies nun, dass ich automatisch einen "Klick" auf die Checkboxen bei aufruf der Seite erzeuge damit wiederum das script läuft und der Text quasi vorausgewählt (und angezeigt) ist?<br> Wie gesagt ich habe in javascript kaum Ahnung und hoffe auf Hilfe um auch noch was lernen zu können.</p> <p>...<br> <script type="text/javascript" src="script.js"></script></p> <p><script type="text/javascript"><br> function Klick() {<br>      id="checkbox1" checked<br> }<br> </script></p> <p><b><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" onload="Klick()"><br> </head></p> <p><form id="meinFormular" id="meinFormular" method="get" action="#"><br>   <p>Welche Unterlagen werden benötigt</p><br>     <input type="checkbox" id="checkbox1" onclick="zeigeText1(this)"> Zuwendungsnachweis<br><br>     <input type="checkbox" id="checkbox2" onclick="zeigeText2(this)"> Agenda <br><br>     <input type="checkbox" id="checkbox3" onclick="zeigeText3(this)"> Einladung <br><br>     <input type="checkbox" id="checkbox4" onclick="zeigeText4(this)"> Checkliste Gesundheitsförderungsmaßnahmen<br><br>     <input type="checkbox" id="checkbox5" onclick="zeigeText5(this)"> Hinweis auf EMC-Tool <br><br>     </form><br> ....</p> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512709?srt=yes#m1512709 Vinzenz Mai vinzenzmai@web.de 2011-06-20T10:53:17Z 2011-06-20T10:53:17Z Automatisch einen Klick auf Checkbox erzeugen <p>Hallo,</p> <blockquote> <p>Aber wie genau mach ich dies nun, dass ich automatisch einen "Klick" auf die Checkboxen bei aufruf der Seite erzeuge damit wiederum das script läuft und der Text quasi vorausgewählt (und angezeigt) ist?</p> </blockquote> <blockquote> <p><script type="text/javascript"></p> </blockquote> <pre><code class="block language-javascript">» <span class="token keyword">function</span> <span class="token function">Klick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">></span> <span class="token comment">// Alle [ref:self812;javascript/objekte/elements.htm@title=Formularelemente] Deines Formulars (Syntax 2) </span> <span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span>meinFormular<span class="token punctuation">.</span><span class="token punctuation">[</span>ref<span class="token operator">:</span>self812<span class="token punctuation">;</span>javascript<span class="token operator">/</span>objekte<span class="token operator">/</span>elements<span class="token punctuation">.</span>htm@title<span class="token operator">=</span>elements<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> count <span class="token operator">=</span> el<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// Durchlaufe alle Formularelemente, </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> count<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// wenn es sich um eine Checkbox handelt </span> <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token punctuation">[</span>ref<span class="token operator">:</span>self812<span class="token punctuation">;</span>javascript<span class="token operator">/</span>objekte<span class="token operator">/</span>elements<span class="token punctuation">.</span>htm#type@title<span class="token operator">=</span>type<span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">'checkbox'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// führe den onclick-Handler aus </span> el<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token punctuation">[</span>ref<span class="token operator">:</span>self812<span class="token punctuation">;</span>javascript<span class="token operator">/</span>sprache<span class="token operator">/</span>eventhandler<span class="token punctuation">.</span>htm#onclick@title<span class="token operator">=</span>onclick<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 operator">></span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p></script></p> <p><body onload="Klick()"><br> </head></p> <p><form id="meinFormular" name="meinFormular" method="get" action="#"><br>   <p>Welche Unterlagen werden benötigt</p><br>     <input type="checkbox" id="checkbox1" onclick="zeigeText1(this)"> Zuwendungsnachweis<br><br>     <input type="checkbox" id="checkbox2" onclick="zeigeText2(this)"> Agenda <br><br>     <input type="checkbox" id="checkbox3" onclick="zeigeText3(this)"> Einladung <br><br>     <input type="checkbox" id="checkbox4" onclick="zeigeText4(this)"> Checkliste Gesundheitsförderungsmaßnahmen<br><br>     <input type="checkbox" id="checkbox5" onclick="zeigeText5(this)"> Hinweis auf EMC-Tool <br><br>     </form></p> </blockquote> <p>Wie Martin Dir schon nahegelegt hat, benötigst Du keine fünf verschiedenen Funktionen, eine einzige reicht. Übergebe dazu:</p> <p>a) eine Referenz auf das Element selbst (wie bisher)<br> b) der id-Wert des Zielelementes<br> c) den Text, der anzuzeigen ist:</p> <p><code class="language-html"><input type="checkbox" id="checkbox1" onclick="[code lang=javascript]zeigeText(this, 'ZWN', 'Zuwendungsnachweis')</code>"> Zuwendungsnachweis<br><br> [/code]<br> mit der Funktion</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">zeigeText</span><span class="token punctuation">(</span><span class="token parameter">elem<span class="token punctuation">,</span> targetid<span class="token punctuation">,</span> text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> content <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token comment">// Inhalt, der in innerHTML geschrieben wird </span> <span class="token comment">// Zugriff aufs Zielelement benötigen wir in jedem Fall. </span> <span class="token keyword">var</span> target <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>targetid<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>elem<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Checkbox ist angehakt, wir benötigen Inhalt: </span> content <span class="token operator">=</span> <span class="token string">'<br>'</span> <span class="token operator">+</span> text<span class="token punctuation">;</span> <span class="token punctuation">}</span> target<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> content<span class="token punctuation">;</span> <span class="token comment">// Du erkennst, dass wir den else-Zweig gar nicht benötigen, </span> <span class="token comment">// denn dann passt die leere Zeichenkette, mit der wir unsere </span> <span class="token comment">// Inhaltsvariable vorbelegt haben. </span> <span class="token punctuation">}</span> </code></pre> <p>Anmerkung:<br> An der Aufrufstelle ist darauf zu achten, dass gültiges HTML herauskommt.</p> <p>Freundliche Grüße</p> <p>Vinzenz</p> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512706?srt=yes#m1512706 Torsten Torsten.Andreas.Winkler@t-online.de 2011-06-20T13:45:52Z 2011-06-20T13:45:52Z Lösung zu "Automatisch einen Klick auf Checkbox erzeugen" gefu. <p>Hallo,</p> <p>danke für die Antworten.<br> Ich habe mein Problem inzwischen wie folgt gelöst:</p> <p>...<br> <script type="text/javascript" src="script.js"></script><br> <script language="javascript"><br> function klicken()<br> {<br> document.getElementById('checkbox1').click();<br> document.getElementById('checkbox2').click();<br> document.getElementById('checkbox3').click();<br> }</p> <p></script><br> <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" alink="#0000FF" vlink="#0000FF" onload="klicken()"><br> </head><br> <form id="meinFormular" id="meinFormular" method="get" action="#"><br> <p>Welche Unterlagen werden benötigt</p><br>     <input type="checkbox" id="checkbox1" onclick="zeigeText1(this)"> Zuwendungsnachweis<br><br>     <input type="checkbox" id="checkbox2" onclick="zeigeText2(this)"> Agenda <br><br>     <input type="checkbox" id="checkbox3" onclick="zeigeText3(this)"> Einladung <br><br>     <input type="checkbox" id="checkbox4" onclick="zeigeText4(this)"> Checkliste Gesundheitsförderungsmaßnahmen<br><br>     <input type="checkbox" id="checkbox5" onclick="zeigeText5(this)"> Hinweis auf EMC-Tool <br><br>    </form><br> <br><br> <br><br> <font size="-1"><br> Sehr geehrte Damen und Herren,<br><br> <br><br> bitte prüfen Sie diese Rechnung und fügen Sie für eine korrekte steuerliche Beurteilung folgende Unterlagen bei:<br> <font color="#FF0000"><br> <b> <div id="ZWN"></div><br> <div id="Agenda"></div><br> <div id="Einladung"></div><br> <div id="Checkliste"></div><br> <div id="EMC"></div><br> </b> </font><br> ...</p> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512707?srt=yes#m1512707 Matthias Apsel webmaster@billiger-im-urlaub.de http://brückentage.info 2011-06-20T18:49:08Z 2011-06-20T18:49:08Z Lösung zu "Automatisch einen Klick auf Checkbox erzeugen" gefu. <p>Om nah hoo pez nyeetz, Torsten!</p> <blockquote> <p>Hallo,</p> <p>danke für die Antworten. Ich habe mein Problem inzwischen wie folgt gelöst:</p> </blockquote> <p>Ich habe selten gesehen, dass so <a href="?t=t=205537&m=m=1393386" rel="noopener noreferrer"></a> <a href="?t=t=205537&m=m=1393414" rel="noopener noreferrer"></a> so leichtfertig und konsequent ignoriert werden.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier. <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="http://www.billiger-im-urlaub.de/kreis_sw.gif" loading="lazy"> </div> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512708?srt=yes#m1512708 EKKi selfhtml.org@spam.mag.ekki.net 2011-06-21T15:53:30Z 2011-06-21T15:53:30Z Lösung zu "Automatisch einen Klick auf Checkbox erzeugen" gefu. <p>Mahlzeit Matthias Apsel,</p> <blockquote> <p>Ich habe selten gesehen, dass so <a href="https://forum.selfhtml.org/?t=205537&m=1393386" rel="noopener noreferrer">wertvolle</a> <a href="https://forum.selfhtml.org/?t=205537&m=1393414" rel="noopener noreferrer">Ansätze</a> so leichtfertig und konsequent ignoriert werden.</p> </blockquote> <p>Der Weg zur <a href="http://www.jedipedia.de/wiki/index.php/Dunklen_Seite" rel="nofollow noopener noreferrer">Dunklen Seite</a> ist leider viel einfacher und schneller zu beschreiten und daher offenbar attraktiver für junge Padawans, die keine Lust haben, wenigstens die <a href="http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundlagen" rel="nofollow noopener noreferrer">http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundlagen</a> zu lernen ...</p> <p>MfG,<br> EKKi</p> <div class="signature">-- <br> sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| </div> https://forum.selfhtml.org/self/2011/jun/19/bestimmtes-script-bei-seitenaufruf-starten/1512710?srt=yes#m1512710 Matthias Apsel webmaster@billiger-im-urlaub.de http://brückentage.info 2011-06-20T12:20:33Z 2011-06-20T12:20:33Z Automatisch einen Klick auf Checkbox erzeugen <p>Om nah hoo pez nyeetz, Vinzenz Mai!</p> <p>Danke im Namen aller Fragesteller für eine solch pädagogisch wertvolle Antwort.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier. <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="http://www.billiger-im-urlaub.de/kreis_sw.gif" loading="lazy"> </div>