Torsten: Bestimmtes script bei Seitenaufruf starten.

Hallo,

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.

Das Script soll in einer eigenen Datei liegen, da die gleiche Funktion für mehrere Seiten benötigt wird.

Hier mal die Seite und danach das Script in einer eigenen Datei:

<html>
<head>
<title></title>
<b><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<script type="text/javascript" src="script.js"></script>
</head>

<form id="meinFormular" id="meinFormular" method="get" action="#">
  <p>Welche Unterlagen werden benötigt</p>
    <input type="checkbox" id="checkbox1" onclick="javascript:zeigeText1(this.id)" checked> Zuwendungsnachweis<br>
    <input type="checkbox" id="checkbox2" onclick="javascript:zeigeText2(this.id)" checked> Agenda <br>
    <input type="checkbox" id="checkbox3" onclick="javascript:zeigeText3(this.id)" checked> Einladung <br>
    <input type="checkbox" id="checkbox4" onclick="javascript:zeigeText4(this.id)"> Checkliste Gesundheitsförderungsmaßnahmen<br>
    <input type="checkbox" id="checkbox5" onclick="javascript:zeigeText5(this.id)"> Hinweis auf EMC-Tool <br>
    </form>
<br>
Sehr geehrte Damen und Herren,<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">
<div id="ZWN"></div>
<div id="Agenda"></div>
<div id="Einladung"></div>
<div id="Checkliste"></div>
<div id="EMC"></div>
</font>
</body>
</html></b>

Hier das Script:

function zeigeText1 (objCheckbox) {
      if (document.getElementById(objCheckbox).checked == true){
         document.getElementById('ZWN').innerHTML = "<br>"+'Zuwendungsnachweis'
      } else {
          document.getElementById('ZWN').innerHTML = ''
      }

}
function zeigeText2 (objCheckbox) {
      if (document.getElementById(objCheckbox).checked == true){
         document.getElementById('Agenda').innerHTML = "<br>"+'Agenda'
      } else {
          document.getElementById('Agenda').innerHTML = ''
      }

}
function zeigeText3 (objCheckbox) {
      if (document.getElementById(objCheckbox).checked == true){
         document.getElementById('Einladung').innerHTML = "<br>"+'Einladung'
      } else {
          document.getElementById('Einladung').innerHTML = ''
      }

}
function zeigeText4 (objCheckbox) {
      if (document.getElementById(objCheckbox).checked == true){
         document.getElementById('Checkliste').innerHTML = "<br>"+'Checkliste'
      } else {
          document.getElementById('Checkliste').innerHTML = ''
      }

}
function zeigeText5 (objCheckbox) {
      if (document.getElementById(objCheckbox).checked == true){
         document.getElementById('EMC').innerHTML = "<br>"+'Hinweis EMC.'
      } else {
          document.getElementById('EMC').innerHTML = ''
      }

}

  1. Hallo,
    Der Event-Handler onload ist das was Du suchst.

    Etwa so:

      
    <html>  
    <head>  
    <title></title>  
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" onload="function () {zeigeText1(); zeigeText2(); zeigeText3();}">  
    ...  
    </body>  
    </html>  
    
    

    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

    1. Hallo,
      Der Event-Handler onload ist das was Du suchst.

      Etwa so:

      <html>
      <head>
      <title></title>
      <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" onload="function () {zeigeText1(); zeigeText2(); zeigeText3();}">
      ...
      </body>
      </html>

      
      >   
      > 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 
      
      1. Hi,

        Aber ich habe auch keine großen Erfahrungen im Bereich Java bzw. Html.

        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.

        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?

        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.

        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.

        Übrigens:

        if (document.getElementById(objCheckbox).checked == true)

        Das ist natürlich unnötig kompliziert: "Wenn es wahr ist, dass ... wahr ist, dann ..."
        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.
        Stattdessen ist

        if (document.getElementById(objCheckbox).checked)

        nicht nur gleichbedeutend, sondern auch noch leichter zu lesen.

        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.

        So long,
         Martin

        --
        Krankenschwester zum fassungslosen Vater von Drillingen: Nein, Sie sollen sich keins aussuchen! Alle drei sind Ihre!
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. prinzipelle Ergänzung:

          nutze statt

          onclick="javascript:zeigeText1(this.id)"

          onclick="zeigeText1(this)"
          (javascript: ist hier sowieso überflüssig)

          und spar dir so das getElementById:

          function zeigeText1 (objCheckbox) {  
                if (objCheckbox.checked){  
          ...
          

          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).

        2. Hallo,

          danke für die Antwort und die Hinweise welche ich auch bereits umgesetzt habe.

          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?
          Wie gesagt ich habe in javascript kaum Ahnung und hoffe auf Hilfe um auch noch was lernen zu können.

          ...
          <script type="text/javascript" src="script.js"></script>

          <script type="text/javascript">
          function Klick() {
               id="checkbox1" checked
          }
          </script>

          <b><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" onload="Klick()">
          </head>

          <form id="meinFormular" id="meinFormular" method="get" action="#">
            <p>Welche Unterlagen werden benötigt</p>
              <input type="checkbox" id="checkbox1" onclick="zeigeText1(this)"> Zuwendungsnachweis<br>
              <input type="checkbox" id="checkbox2" onclick="zeigeText2(this)"> Agenda <br>
              <input type="checkbox" id="checkbox3" onclick="zeigeText3(this)"> Einladung <br>
              <input type="checkbox" id="checkbox4" onclick="zeigeText4(this)"> Checkliste Gesundheitsförderungsmaßnahmen<br>
              <input type="checkbox" id="checkbox5" onclick="zeigeText5(this)"> Hinweis auf EMC-Tool <br>
              </form>
          ....

          1. Hallo,

            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?

            <script type="text/javascript">

            » function Klick() {  
            
            >      // Alle [ref:self812;javascript/objekte/elements.htm@title=Formularelemente] Deines Formulars (Syntax 2)  
            
                   var el = document.meinFormular.[ref:self812;javascript/objekte/elements.htm@title=elements];  
                   var count = el.length;  
                   // Durchlaufe alle Formularelemente,  
                   for (i = 0; i < count; i++) {  
                       // wenn es sich um eine Checkbox handelt  
                       if (el[i].[ref:self812;javascript/objekte/elements.htm#type@title=type] == 'checkbox') {  
                           // führe den onclick-Handler aus  
                           el[i].[ref:self812;javascript/sprache/eventhandler.htm#onclick@title=onclick]();  
                       }  
                   }  
            
            > }
            
            

            </script>

            <body onload="Klick()">
            </head>

            <form id="meinFormular" name="meinFormular" method="get" action="#">
              <p>Welche Unterlagen werden benötigt</p>
                <input type="checkbox" id="checkbox1" onclick="zeigeText1(this)"> Zuwendungsnachweis<br>
                <input type="checkbox" id="checkbox2" onclick="zeigeText2(this)"> Agenda <br>
                <input type="checkbox" id="checkbox3" onclick="zeigeText3(this)"> Einladung <br>
                <input type="checkbox" id="checkbox4" onclick="zeigeText4(this)"> Checkliste Gesundheitsförderungsmaßnahmen<br>
                <input type="checkbox" id="checkbox5" onclick="zeigeText5(this)"> Hinweis auf EMC-Tool <br>
                </form>

            Wie Martin Dir schon nahegelegt hat, benötigst Du keine fünf verschiedenen Funktionen, eine einzige reicht. Übergebe dazu:

            a) eine Referenz auf das Element selbst (wie bisher)
            b) der id-Wert des Zielelementes
            c) den Text, der anzuzeigen ist:

            <input type="checkbox" id="checkbox1" onclick="[code lang=javascript]zeigeText(this, 'ZWN', 'Zuwendungsnachweis')"> Zuwendungsnachweis<br>
            [/code]
            mit der Funktion

            function zeigeText(elem, targetid, text) {  
                var content = '';  // Inhalt, der in innerHTML geschrieben wird  
                // Zugriff aufs Zielelement benötigen wir in jedem Fall.  
                var target = document.getElementById(targetid);  
                if (elem.checked) {  
                    // Checkbox ist angehakt, wir benötigen Inhalt:  
                    content = '<br>' + text;  
                }  
                target.innerHTML = content;  
                // Du erkennst, dass wir den else-Zweig gar nicht benötigen,  
                // denn dann passt die leere Zeichenkette, mit der wir unsere  
                // Inhaltsvariable vorbelegt haben.  
            }  
            
            

            Anmerkung:
            An der Aufrufstelle ist darauf zu achten, dass gültiges HTML herauskommt.

            Freundliche Grüße

            Vinzenz

            1. Om nah hoo pez nyeetz, Vinzenz Mai!

              Danke im Namen aller Fragesteller für eine solch pädagogisch wertvolle Antwort.

              Matthias

              --
              1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
          2. Hallo,

            danke für die Antworten.
            Ich habe mein Problem inzwischen wie folgt gelöst:

            ...
            <script type="text/javascript" src="script.js"></script>
            <script language="javascript">
            function klicken()
            {
            document.getElementById('checkbox1').click();
            document.getElementById('checkbox2').click();
            document.getElementById('checkbox3').click();
            }

            </script>
            <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" alink="#0000FF" vlink="#0000FF" onload="klicken()">
            </head>
            <form id="meinFormular" id="meinFormular" method="get" action="#">
            <p>Welche Unterlagen werden benötigt</p>
                <input type="checkbox" id="checkbox1" onclick="zeigeText1(this)"> Zuwendungsnachweis<br>
                <input type="checkbox" id="checkbox2" onclick="zeigeText2(this)"> Agenda <br>
                <input type="checkbox" id="checkbox3" onclick="zeigeText3(this)"> Einladung <br>
                <input type="checkbox" id="checkbox4" onclick="zeigeText4(this)"> Checkliste Gesundheitsförderungsmaßnahmen<br>
                <input type="checkbox" id="checkbox5" onclick="zeigeText5(this)"> Hinweis auf EMC-Tool <br>
               </form>
            <br>
            <br>
            <font size="-1">
            Sehr geehrte Damen und Herren,<br>
            <br>
            bitte prüfen Sie diese Rechnung und fügen Sie für eine korrekte steuerliche Beurteilung folgende Unterlagen bei:
            <font color="#FF0000">
            <b> <div id="ZWN"></div>
            <div id="Agenda"></div>
            <div id="Einladung"></div>
            <div id="Checkliste"></div>
            <div id="EMC"></div>
            </b> </font>
            ...

            1. Om nah hoo pez nyeetz, Torsten!

              Hallo,

              danke für die Antworten. Ich habe mein Problem inzwischen wie folgt gelöst:

              Ich habe selten gesehen, dass so so leichtfertig und konsequent ignoriert werden.

              Matthias

              --
              1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
              1. Mahlzeit Matthias Apsel,

                Ich habe selten gesehen, dass so wertvolle Ansätze so leichtfertig und konsequent ignoriert werden.

                Der Weg zur Dunklen Seite ist leider viel einfacher und schneller zu beschreiten und daher offenbar attraktiver für junge Padawans, die keine Lust haben, wenigstens die http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundlagen zu lernen ...

                MfG,
                EKKi

                --
                sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  2. [latex]Mae  govannen![/latex]

    <html>
    <head>
    <title></title>
    <b><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

    [...]

    </html></b>

    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.

    <form id="meinFormular" id="meinFormular" method="get" action="#">

    Du vergibst hier zwei Mal das Attribut "id", das ist nicht gestattet.

    <p>Welche Unterlagen werden benötigt</p>
        <input type="checkbox" id="checkbox1" onclick="javascript:zeigeText1(this.id)" checked> Zuwendungsnachweis<br>
        <input type="checkbox" id="checkbox2" onclick="javascript:zeigeText2(this.id)" checked> Agenda <br>
        <input type="checkbox" id="checkbox3" onclick="javascript:zeigeText3(this.id)" checked> Einladung <br>
        <input type="checkbox" id="checkbox4" onclick="javascript:zeigeText4(this.id)"> Checkliste Gesundheitsförderungsmaßnahmen<br>
        <input type="checkbox" id="checkbox5" onclick="javascript:zeigeText5(this.id)"> Hinweis auf EMC-Tool <br>
        </form>

    Sieht doch aus wie eine Liste, oder? Also auch als Liste auszeichnen.
    Die IDs sind überflüssig und können komplett entfallen.
    Der Text soll als Label-Element eine Beziehung zur jeweiligen Checkbox aufbauen.
    Die Zeilenumbrüche entfallen.
    Das Label javascript: ist unnötig, was in onxxxx-Attributen steht, ist immer[1] Javascript.
    Die Checkboxen sollten durch ein gemeinsames Name-Attribut gruppiert werden.
    Es muß nicht für jede Checkbox eine eigene Funktion definiert werden.

    Also bereinigen wir den Aufbau:

    <form id="meinFormular" name="meinFormular" method="get" action="">  
    	<p>Welche Unterlagen werden benötigt?</p>  
    	<ul>  
    		<li><label><input type="checkbox" name="unterlagen" onclick="zeigeText(this, 'ZWN')" checked> Zuwendungsnachweis</label></li>  
    		<li><label><input type="checkbox" name="unterlagen" onclick="zeigeText(this, 'Agenda')" checked> Agenda</label></li>  
    		<li><label><input type="checkbox" name="unterlagen" onclick="zeigeText(this, 'Einladung')" checked> Einladung</label></li>  
    		<li><label><input type="checkbox" name="unterlagen" onclick="zeigeText(this, 'Checkliste')"> Checkliste Gesundheitsförderungsmaßnahmen</label></li>  
    		<li><label><input type="checkbox" name="unterlagen" onclick="zeigeText(this, 'EMC')"> Hinweis auf EMC-Tool</label></li>  
    	</ul>  
    </form>
    

    Nun zum Javascript. Ich würde es vorerst (ist wahrscheinlich noch optimierbar) so lösen:

    (Aufgrund einiger Probleme mit meinem lokalen Server kann ich das gerade nicht selber testen, daher können Fehler drin sein)

      
    // Um globale Variablen möglichst zu minimieren, den gesamten Code in eine Funktion einschließen  
    // und diese direkt nach der Erstellung ausführen  
    var zeigeText = (function () {  
        var texte = {  
            'ZWN': 'Zuwendungsnachweis',  
            'Agenda': 'Agenda',  
            'Einladung': 'Einladung',  
            'Checkliste': 'Checkliste',  
            'EMC': 'Hinweis EMC.'  
        };  
      
        // Diese Funktionsreferenz wird an die Variable zeigeText zurückgegeben und bei Aufrufen von zeigeText()  
        // wird nur diese Funktion ausgeführt  
        return function (el, targId) {  
            // [link:http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=Ternärer Operator] statt if ... else  
            document.getElementById(targId).innerHTML = (el.checked) ? '<br>' + texte[targId] : '';  
        };  
    })();  
    
    

    ... 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).
    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...

    <br>

    ... wird in den seltesten Fällen benötigt, löse die Darstellung per CSS

    <font color="#FF0000">

    ...ist, wie die Attribute des body-Elements auch, veraltete Technik, durch CSS ersetzen.

    Stur lächeln und winken, Männer!
    Kai

    --
    Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
    in Richtung "Mess up the Web".(suit)
    SelfHTML-Forum-Stylesheet