# Funktion in Html Tag ausführen



## TobiNeu (18. Mai 2010)

Hi
ich werde gerade verrückt.
Ich habe in meinem Html-Code eine Stelle:


```
<!-- $IF idExist -->
      ...
<!-- $ELSE -->
     <div id="loadFunction"></div> 
     <!-- hier hätte ich gerne einen tag der eine javascript funktion auslöst -->
<!-- $ENDIF -->
```

In Worten ich habe in meinem Html Bereich einen Teil der nicht immer geladen werden soll sondern nur wenn die Abfrage stimmt. So weit so gut.. 
Mein Problem ist das ich gern eine Javascript Funktion ausführen würde
habs so versucht:
<div id="loadFunction" onload="test();"></div> 
aber leider funktioniert die onload nur im body tag

Mein jetziger Ansatz wäre über nen EventListener dazu hab ich diese Zeile eingefügt:
document.getElementById("loadFunction").addEventListener("load", test, false);

geht leider auch nicht.

Hat jemand ne Idee ?

prototype hät ich noch zur Verfügung

Wäre über jede Hilfe dankbar

Grüße


----------



## ComFreek (18. Mai 2010)

Hallo,

das onLoad-Event gibt es nur beim Body und beim Frameset.

```
...

  <body onLoad="test()">
  ...
  </body>
</html>
```

Und in der test()-Funktion müsstest du deine Bedingung abfragen.


----------



## TobiNeu (18. Mai 2010)

Danke für die schnelle Antwort aber das will ich nicht.

Ich will nicht den body-Tag verwenden.
Die javascript-Funktion muss genau an dieser Stelle aufgerufen werden.
Die Bedingung kann ich nicht verschieben


----------



## ComFreek (18. Mai 2010)

Ok, ich hatte die andere Möglichkeit vergessen. Du kannst JavaScript-Code einfach in den Body-Teil schreiben und er wird ausgeführt:

```
<body>
...
  <div id="myDiv">
    <script type="text/javascript">
      alert("ES KLAPPT!");
    </script>
    </div>
</body>
```
Ich würde dir bei längeren Bedingungen und Befehlen empfehlen, eine Funktion aufzurufen, die du vorher im HEAD-Tag definiert hast.


----------



## TobiNeu (18. Mai 2010)

ok vielen dank,
das hatte ich auch shcon probiert. Mit alert wars kein Problem
aber meine Funktion die ich im unteren script Bereich geschrieben hab bekomm ich irgendwie nicht ausgeführt.

<body>
...
  <div id="myDiv">
    <script type="text/javascript">
      getChilds();
    </script>
    </div>
...
   <script type="text/javascript">
      function getChilds(){
        ...
      }
    </script>

</body>


----------



## ComFreek (18. Mai 2010)

Der Browser weiß ja von dieser Funktion nichts, da sie erst unten definiert ist. Hier hast du mal einen vollständigen Code:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
               "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <script type="text/javascript">
    function GetChilds()
    {
      // Mach was
    }
    </script>
  </head>
  <body>
    <div id="myDiv">
      <script type="text/javascript">
        GetChilds();  // Kein Zugriff auf "myDiv2", da noch nicht definiert!
      </script>
    </div>
    <div id="myDiv2"></div>
  </body>
</html>
```

Achtung: Du darfst in der Funktion nicht auf Elemente zugreifen, die noch nicht definiert sind (siehe oben)!


----------



## TobiNeu (18. Mai 2010)

Ok danke.

Ich denke so komm ich leider nicht zum Ziel, da ich auf Tags zugreifen muss.
Um bisschen Licht ins dunkle zu bringen es handelt sich hier um ne Baumstruktur die sich rekursiv aufbaut.
D.h. ich erstelle für jeden Knoten immer ein div tag mit dem seinem key als id
und lade in diesen div tag dann die nächste Ebene mit den dazugehörigen Knoten, usw.

Funktioniert auch alles mit onclick aber nun solls halt auch ohne Klicks geöffnet werden.
Aus diesem Grund muss ich auf die Tags zugreifen können.

Ich denke der richtige Weg geht schon in die Richtung eventHandler.
Freu mich über jede weitere Vorschläge
Danke

Bin nun erstmal 3Stunden im Sport und dann schau ich wieder rein


----------



## ComFreek (18. Mai 2010)

Was hast du denn eigentlich gegen onLoad im Body?
Es wäre vllt. hilfreich, wenn du den Code mit onClick postest..


----------



## TobiNeu (18. Mai 2010)

Ich kann die Funktion nicht im body aufrufen, da die Klasse(Datei , ka wie man das bei javascript nennt) zum einen für das manuelle öffnen des baumes verantwortlich ist und zum anderen für das automatische öffnen eines pfades.

Wie gesagt die onload funktion soll wirklich nur dann aufgerufen werden wenn die if bedienung vorher erfüllt wird .

Den Code kann ich leider nicht veröffentlichen.


----------



## timestamp (18. Mai 2010)

Und so?


```
<script type="text/javascript">
  run_function = false;
  function do_something(){
    if( run_function)
    alert("foo");
  }
  </script>
</head>
<body onload="do_something();">
<div>
  <script type="text/javascript">run_funtion = true;
  </script>
</div>
</body>
```

Ist aber ungetestet


----------



## TobiNeu (18. Mai 2010)

kann leider erst morgen früh testen, ich weiß nicht inwiefern sich ein javascript aufruf außerhalb eines html tags mit unserem parser verträgt (parameter)
aber könnt mir vorstellen dass das schon klappen könnte 

Danke schonmal

Vorschläge in Richtung EventHandler , prototype (dom:load) etc sind wilkommen!


----------



## ComFreek (19. Mai 2010)

@timestamp: Was für ein Sinn steckt dahinter, auf die Variable run_function zuzugreifen? onLoad wird erst nach dem Laden des Skriptest ausgeführt, daher spielt run_function keine Rolle!


----------



## TobiNeu (20. Mai 2010)

hey ich bins wieder 

ok ich mach das nun über den bodyload da geb ich der funktion gleich die Knoten-IDs des Pfades den ich öffnen will mit. sieht dann so aus:


```
<body onload="expandTree(%orgunit.key%,node1,node2,node3,..);">
...

function expandTree(orgKey,noce1,node2,node3,...){	
  getChilds(noce1);		
  getChilds(node2);					
  getChilds(node3);		
}
```

Die Funktion getChilds läd per Ajax in den für den Knoten vorhergesehen div Bereich die nächste Ebene inklusive den neuen div Tags für die darunter liegende Ebene (die kedoch noch nicht geladen wird).
Mein Problem ist nun das wenn ich das so lass das er nur die erste Ebene läd und nicht die folgenden. Mein Problem ist glaub ich das er die Funktion getChilds(node2) aufruft aber die div Felder noch nicht kennt.

Bau ich zwischen die ganzen getChilds(nodeX); ein alert ein funktionierts einwandfrei.

Jemand nen Lösungvorschlag ?
Wäre genial Danke

den ersten Parameter %orgunit.key% bitte vernachlässigen 
Vergessen den rauszunehmen

kurzgefasst: gibt es eine Möglichkeit eine Javascript Funktion erst dann auszuführen wenn der Browser den bisherige DOM komplett geladen hat?

ok 
ich glaub ich habs
ich teste es noch kurz durch
wenn es voll funktioniert sag ich wie ichs gelöst hab


----------



## ComFreek (20. Mai 2010)

Das Problem liegt wahrscheinlich beim AJAX. Ich hatte mal das gleiche Problem, denn du rufst den nächsten AJAX-Befehl auf, während der vorherige noch nicht beendet wurde.

Lösen kann man das, wenn man eine Variable anlegt, die genau dan auf true gesetzt wird, wenn der Befehl fertig ist (.onreadystatechange = function(){}) oder man läuft AJAX synchron laufen (der dritte Parameter bei open())


----------



## TobiNeu (21. Mai 2010)

hi
also habs zum laufen gebracht, nun arbeite ich noch an der performance:
mein code bisher:


```
function expandTree(orgKey,nodes){	
  if (orgKey != null){				
    childsCount = countNodes(nodes);
    for (i=0;i<childsCount;i++){     
        setTimeout('getChilds('+ nodes[i] +')',300*i);     
    }
  }	
}
```

Nun würd ich gern anstatt der setTimeout Funktion die eine bestimmte Zeit wartet überprüfen ob der Server den aktuellen DOM geladen hat

Hab da an sowas gedacht:
document.addEventListener("DOMContentLoaded", getChilds(..), false);
funktioniert aber leider nicht.

oder muss ich in diese Richtung gehen?


```
var  ajax_obj = new  XMLHttpRequest();  
   ajax_obj.onreadystate = function() {
      if(ajax_obj.readyState == 4) {
        getChilds(..);
      }
   };
```

Jemand ne Idee ?


----------



## TobiNeu (21. Mai 2010)

Da die Elemente teilweise dynamisch nachgeladen werden hab ich mir gedacht

frag ich das so ab :


```
while (divnotfound) {
  if(document.getElementById(nodes[i]+'-subs'){  //überprüfung ob div feld schon nachgeladen wurde
    getChilds(nodes[i]);
    divnotfound = false;							
  }
}
```

geht leider auch nicht


----------



## ComFreek (21. Mai 2010)

Das  mit dem onreadystatechage ist völlig richtig:

```
ajax.onreadystatechange = function()
{
  if (ajax.readyState==4) // Wenn fertig
  {
    deine_funktion();
  }
}
```


----------



## TobiNeu (26. Mai 2010)

Hm mit onreadystate habe ichs irgendwie nicht hinbekommen, wurde irgendwie nie ein fertig geladen ausgelöst. 

Nunja ich lass nun den Ajax.Updater mit asycnchron = false laufen , erfüllt auch seinen Sinn.

Danke nochmals für die Hilfe


----------



## ThePirateNeo (17. Oktober 2017)

Hey TOBINeu das wäre eine Funktion 

LG Philip

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Brutto-Netto</title>

<script type="text/javascript">

function BinN(Geld_id, Ergebnis_id) {

   Geld=window.document.getElementById(Geld_id).value;

   Ergebnis=Geld / 1.19 ;

   window.document.getElementById(Ergebnis_id).value=Ergebnis;

}

function NinB(Geld_id, Ergebnis_id) {

      Geld=window.document.getElementById(Geld_id).value;

      Ergebnis=Geld * 1.19;   

      window.document.getElementById(Ergebnis_id).value=Ergebnis;

}

</script>

</head>

<body>

<input type="text" id="Geld"><br>

<button type="button" onClick="BinN('Geld', 'Ergebnis');">Brutto in Netto</button>

<button type="button" onClick="NinB('Geld', 'Ergebnis')">Netto in Brutto</button><br>

<input type="text" id="Ergebnis" readonly="readonly">

</body>

</html>


----------



## ThePirateNeo (17. Oktober 2017)

Minimal Überarbeitet 
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Brutto-Netto</title>

<script type="text/javascript">

function BinN(Geld_id, Ergebnis_id) {

   Geld=window.document.getElementById(Geld_id).value;

   Ergebnis=Math.round(Geld / 1.19 * 100) / 100 ;

   window.document.getElementById(Ergebnis_id).value=Ergebnis;

}

function NinB(Geld_id, Ergebnis_id) {

      Geld=window.document.getElementById(Geld_id).value;

      Ergebnis=Math.round(Geld * 1.19 * 100) / 100;   

      window.document.getElementById(Ergebnis_id).value=Ergebnis;

}

</script>

</head>

<body>

<input type="text" id="Geld"><br>

<button type="button" onClick="BinN('Geld', 'Ergebnis');">Brutto in Netto</button>

<button type="button" onClick="NinB('Geld', 'Ergebnis')">Netto in Brutto</button><br>

<input type="text" id="Ergebnis" readonly="readonly">

</body>

</html>


----------

