div Element in externer JS Datei ansprechen

[northon]

Guten Tag allerseits!

Ich habe folgendes Problem über das ich zur Zeit sehr staune:

Auf einer Page habe ich ein JS eingebunden und ich möchte in diesem JS div-Elemente ansprechen, welche schon auf der Page vorhanden sind.

Also habe ich kurzerhand var hans = document.getElementById['DasDivElement']
ausprobiert, doch dies funktioniert leider nicht. Muss ich irgendwelche Parameter übergeben, oder ändert sich der document...-Befehl wenn ich auf eine andere Datei zugreife?

Vielen Dank im vorraus,
mit freundlichen Grüßen
Northon

[EKKi]

Mahlzeit northon,

Also habe ich kurzerhand var hans = document.getElementById['DasDivElement']

Versuch's mal mit runden Klammern - http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById() ist eine Methode, kein Array ...

MfG,
EKKi

[northon]

Mahlzeit northon,

Also habe ich kurzerhand var hans = document.getElementById['DasDivElement']

Versuch's mal mit runden Klammern - http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById() ist eine Methode, kein Array ...

MfG,
EKKi

Ja stimmt sry, war nur ein Verschreiber :)

Nein, es funktioniert auch mit runden Klammern nicht...

Wie würde eine solche Übergabe aussehn?
Der Aufruf des eigentlichen Scripts erfolgt ja nach dem Laden des Bodys.

Wenn ich das Element Übergebe, reicht es, die ID zu übergeben?

Vielen Dank für eure Antworten,
Northon

[EKKi]

Mahlzeit northon,

Wenn ich das Element Übergebe, reicht es, die ID zu übergeben?

Wenn Du dem von mir genannten Link gefolgt wärst und den dort "versteckten" Text gelesen hättest, wüsstest Du, was die Methode http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById() als Parameter erwartet (darüber hinaus ist das eigentlich schon aus dem Namen recht gut ersichtlich).

MfG,
EKKi

[northon]

Mahlzeit northon,

Wenn ich das Element Übergebe, reicht es, die ID zu übergeben?

Wenn Du dem von mir genannten Link gefolgt wärst und den dort "versteckten" Text gelesen hättest, wüsstest Du, was die Methode http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById() als Parameter erwartet (darüber hinaus ist das eigentlich schon aus dem Namen recht gut ersichtlich).

MfG,
EKKi

Mahlzeit EKKi!

Vielen Dank für diene erneute Antwort!
Es ist schon Logisch, dass getElementById die ID als Parameter erwartet, nur leider funktioniert das Ansprechen durch das bloße Übergeben der Id auch nicht; naja habe mittlerweile einen Workaround gefunden.

Danke nochmals und einen ruhigen Tag,
Northon

[EKKi]

Mahlzeit northon,

Es ist schon Logisch, dass getElementById die ID als Parameter erwartet, nur leider funktioniert das Ansprechen durch das bloße Übergeben der Id auch nicht;

"Funktioniert nicht" funktioniert nicht: Was genau passiert bzw. passiert nicht? Welche Fehler treten auf? Was steht in der Fehlerkonsole? In welchen Browsern tritt der Fehler auf? Sonstiger relevanter Quellcode?

naja habe mittlerweile einen Workaround gefunden.

Du möchtest also nicht die Ursache des Problems beheben, sondern oberflächlich an den Symptomen herumdoktorn? Ich persönlich halte das für keine gute Idee ... aber es soll ja jeder nach seiner Façon selig werden. :-)

MfG,
EKKi

[northon]

Also das Script erzeugt ein div Element, welches sich dann am Bildschirm einblendet. Per AppendChild erzeuge ich auch noch untergeordnete Divs, welche ebenfalls dargestellt werden und so eine verschachtelte Infobox bieten.
Der in der Box dargestellte Text wird per Parameter von der HTML-Seite aus übergeben.

Soviel zur Umgebung in der das Problem stattfindet.

Mein entgültiges Ziel wäre dann folgendes:
Ich möchte per Klicks auf die Box die untergeordneten divs aufrufen, bzw. verstecken und suche hierfür eine Möglichkeit, die im Script erzeugten Divs anzusprechen.

Wenn ich die per getElementById Versuche passiert schlichtweg gar nix, Firebug sagt auch nix näheres dazu.

Ein weiteres Problem wird sein, wie ich die Mausklicks auf das dynamisch erzeugte Div Abfrage. Wenn du den ganzen Code dazu sehen willst (er ist ziemlich grässlich in seiner jetzigen "Probierfassung") poste ich ihn gerne.

Vielen Dank für deine Mühe,
Mahlzeit
Northon

[EKKi]

Mahlzeit northon,

Ich möchte per Klicks auf die Box die untergeordneten divs aufrufen, bzw. verstecken und suche hierfür eine Möglichkeit, die im Script erzeugten Divs anzusprechen.

Dafür ist normalerweise ja getElementById() da.

Wenn ich die per getElementById Versuche passiert schlichtweg gar nix, Firebug sagt auch nix näheres dazu.

Hast Du denn schon mal versucht, durch Kontrollausgaben (http://de.selfhtml.org/javascript/objekte/window.htm#alert@title=alert() o.ä.) zu überprüfen, was genau die Methode getElementById() denn so zurückliefert? Dass sie nämlich wirklich "gar nichts" macht, kann ich nicht so recht glauben.

Ein weiteres Problem wird sein, wie ich die Mausklicks auf das dynamisch erzeugte Div Abfrage.

Im Normalfall durch entsprechende http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=onclick-Eventhandler, die Du auch dynamisch per Javascript hinzufügen kannst.

Wenn du den ganzen Code dazu sehen willst (er ist ziemlich grässlich in seiner jetzigen "Probierfassung")

... aber für die Lösungsfindung unabdingbar.

poste ich ihn gerne.

Tu das! Dann brauche ich meine Glaskugel nicht extra in die Reinigung zu geben ... :-)

MfG,
EKKi

[northon]

Soda, um nicht noch eine rechnung für die Glaskugelreinigung zu erhalten, hier der betroffene Code:

Zuert das html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html lang="en">  
  
  
<head>  
  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
  
 <title>Hörl EDV - Ihre kompetente EDV Betreuung aus Innsbruck</title>  
<link rel="stylesheet" type="text/css" href="tooltip.css">  
  
  
<style type="text/css">  
  
body {  
  text-align: left; /* Zentrierung IE */  
  opacity: 0;  
}  
  
#seitenbereich {  
  text-align:left;  /* Inhalt wieder links */  
  margin-top: 15%;  
  margin-left: 10%;  
  background-color:white;  
}  
  
#fusszeile {  
  text-align:center;  
  clear: both;  
  background-color:white;  
  border-top:1px solid black;  
}  
  
#navi {  
  float:left;  
  background-color:white;  
  }  
  
#inhalte {  
  background-color:white;  
  margin-left: 30%;  
}  
  
.style1 {  
 font-family:Arial, Helvetica, Sans-Serif}  
  
</style>  
  
<script language="javascript" type="text/javascript" src="innertooltip.js"></script>  
<script language="javascript" type="text/javascript" src="tooltip.js"></script>  
<script language="javascript" type="text/javascript">  
 var inMoz = 0, inIE = 0;  
 var id;  
 function fadein()  
 {  
   inMoz = inMoz + 0.1;  
   inIE = inIE + 10;  
   if (inMoz<1)  
   {  
   document.getElementById('body').style.filter='alpha(opacity='+inIE+')';  
   document.getElementById('body').style.opacity = inMoz ;  
   window.setInterval("fadein('body')",200);  
   }  
 }  
  
 function init()  
 {  
 fadein();  
 tooltip();  
 }  
  
  
  
</script>  
</head>  
<body id="body" onload="init()">  
  
  
<div id="seitenbereich">  
 <hr>  
  <div id="navi" style="width: 11.6em; height: 452px">  
  
  <!--Fallbeispiel-->  
  
    <div><hr><img  onmouseover="tooltip.show(  
  
    '<h1><b>Fallbeispiel:</b></h1><br> Sie haben ein Unternehmen mit 5 Arbeitsplätzen und einem Server. <br>'  
   +'Sie wollen wissen ob Ihr Internet- und Netzwerkstand aktuell ist.<br><br>'  
   +'<b>Wir gehen wie folgt vor:</b><br>'  
   +'1. Analyse des Netzwerks <br> 2. Empfehlungen <br> 3. Entweder Suche'  
   +'nach dem idealen Hardwarehändler für Neubeschaffung oder direkte Beseitigung von Fehlern / Verbesserung'  
    , 600,1)" src="fallbeispiel_grey.gif" alt="Fallbeispiel"><hr><br></div>  
  
  <!--Referenzen-->  
    <div><hr><img onmouseover="tooltip.show(  
  
    '<h1><b>Referenzen:</b></h1><br> <b>Auszug aus unserer Kundenliste:</b><br><br>'  
   +'Tiroler Zukunftsstiftung <br> Verkehrsverbund Tirol <br> Institut für Föderalismus <br> und viele mehr...'  
  
    , 300,0);" onmouseout="tooltip.hide();" src="referenzen_grey.gif" alt="Referenzen"><hr><br></div>  
  <!--Services-->  
    <div><hr><img onmouseover="tooltip.show(  
  
    '<h1><b>Services:</b></h1><br><b>Netzwerk:</b><br> -Beratung <br> -Installation<br> -Planung<br>'  
   +' -Wartung (zum Beispiel in Form eines Wartungsvertrags)<br> -Erweiterung<br><b>Consulting:</b>'  
   +'<br> -Beratung und Erstellung langfistiger Informationssystem-Konzepte<br>'  
   +'Unterstützung bei Kaufentscheidung, Investitionsberatung<br>'  
   +'Analyse und Optimierung bestehender Systeme<br>'  
   +'<b>Datenbank:</b><br>'  
   +'Ihre Datenbank, für Ihr Unternehmen!<br>'  
   +'<b>Internetapplikationen:</b><br>'  
   +'Wie zum Beispiel Onlinefragebögen'  
  
    , 300,0)" onmouseout="tooltip.hide();" src="services_grey.gif" alt="Services"><hr><br></div>  
  <!--Kontakt-->  
    <div><hr><img onmouseover="tooltip.show(  
  
    '<h1><b>Kontakt</b></h1><br><div onclick=&#34;innertooltip(&#39;Test&#39;,200);&#34;></div>'  
  
    , 300,0);" onmouseout="tooltip.hide();" src="kontakt_grey.gif" alt="Kontakt"><hr><br></div>  
  </div>  
  
  <div id="inhalte" style="width: 0px; height: 449px">  
    <img src="bckgrnd.gif" style="z-index:0" width="546" height="448">  
  </div>  
  
  <div id="fusszeile">  
  
  </div>  
  
</div>  
  
</body>  
</html>  

und nun das dazugehörige Javascript (ist eine abgewandelte Version von http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/)

  
var tooltip=function(){  
 var id = 'tt';  
 var speed = 10;  
 var timer = 20;  
 var endalpha = 50;  
 var alpha = 0;  
 var tt,t,c,b,h,z;  
 var ie = document.all ? true : false;  
 return{  
  show:function(v,w,z){  
                     //Funktion erzeugt das div-Element  
   if(tt == null){  
    tt = document.createElement('div');  
    tt.setAttribute('id',id);  
    c = document.createElement('div');  
    c.setAttribute('id',id + 'cont');  
    tt.appendChild(c);  
    z = document.createElement('div');  
    z.setAttribute('id',id + 'cont');  
    tt.appendChild(z);  
    document.body.appendChild(tt);  
    z.style.marginTop = -30 +"%";  
    z.style.marginLeft = 10 + "%";  
    z.innerHTML = 'Habe die Ehre';  
    tt.style.opacity = 0;  
    tt.style.filter = 'alpha(opacity=0)';  
   }  
  
   tt.style.display = 'block';  
   tt.style.width = 500 + 'px';  
   tt.style.height = 420 + 'px';  
   c.style.width = tt.style.width;  
   c.style.height = tt.style.height;  
   c.innerHTML = v;  
  
  h = parseInt(tt.offsetHeight) + top;  
  clearInterval(tt.timer);  
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);  
  },  
  fade:function(d){  
   var a = alpha;  
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){  
    var i = speed;  
   if(endalpha - a < speed && d == 1){  
    i = endalpha - a;  
   }else if(alpha < speed && d == -1){  
     i = a;  
   }  
   alpha = a + (i * d);  
   tt.style.opacity = alpha * .01;  
   tt.style.filter = 'alpha(opacity=' + alpha + ')';  
  }else{  
    clearInterval(tt.timer);  
     if(d == -1){tt.style.display = 'none'}  
  }  
 },  
 hide:function(){  
  clearInterval(tt.timer);  
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);  
  }  
 };  
}();  

Dem Javascript ist noch dieses kleine CSS beigelegt:

  
#tt {  
  
 position:absolute;  
 display:block;  
 top: 15px;  
 margin-top: 15%;  
 margin-left: 36%;  
  
 }  
  
 #ttcont {  
  
 display:block;  
 padding:2px 12px 3px 7px;  
 margin-left:5px;  
 background:#666;  
 color:#fff;  
 border:thin black solid;  
  
 }  
 

Ich bin eigentlich EDV Betreuer und weiß, dass ich mich nicht ansatzweise al Programmierer oder WebDesigner beschimpfen darf, falls du aber doch Punkte im Code findest, die dir, auch vom Stil her, ganz übel aufstoßen, drück sie mir bitte ins Gesicht!

Zur Erläuterung:

Beim 1. Punkt Fallbeispiel habe ich einen 2. DivContainer eingefügt um zu veranschaulichen, was ich mit einem Klick zeigen will. Im letzten Punkt Kontakt habe ich versucht, per Unicode dynamisch ein div im div und das während der Parameterübergabe, zu erzeugen. Leider funktioniert das nicht :)

Vielen Dank
Northon

[Der Martin]

Hallo,

[code lang=java]

wieso zeichnest du Javascript-Code hier als Java aus? Du weißt doch hoffentlich, dass Java mit Javascript nicht mehr zu tun hat als Gummi mit Gummibärchen oder Mozart mit Mozartkugeln?

Ich bin eigentlich EDV Betreuer und weiß, dass ich mich nicht ansatzweise al Programmierer oder WebDesigner beschimpfen darf, falls du aber doch Punkte im Code findest, die dir, auch vom Stil her, ganz übel aufstoßen, drück sie mir bitte ins Gesicht!

Na, wenn du drauf bestehst ... ;-)

tt = document.createElement('div');
    tt.setAttribute('id',id);

Hier solltest du besser direkt auf die Objekteigenschaft zugreifen, anstatt über setAttribute() zu gehen. Mit dem Weg über das Attribut hat der IE gern mal Probleme. Also besser:

tt.id = id;

c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    tt.appendChild(c);
    z = document.createElement('div');
    z.setAttribute('id',id + 'cont');
    tt.appendChild(z);

Und spätestens hier wird's böse: Hier existieren auf einmal zwei Elemente, die dieselbe ID haben. Eine ID muss aber dokumentweit eindeutig sein, darf also nicht mehrfach vorkommen!
Ich will's nicht beschreien, aber ich könnte mir vorstellen, dass hier schon des Lösels Rätsung liegt.

So long,
 Martin

[northon]

Hallo,

[code lang=java]

wieso zeichnest du Javascript-Code hier als Java aus? Du weißt doch hoffentlich, dass Java mit Javascript nicht mehr zu tun hat als Gummi mit Gummibärchen oder Mozart mit Mozartkugeln?

Mmmmmh Mozartkugeln... :) Danke, es wundert mich, dass es dies bezüglich keine Probleme gab.

Ich will's nicht beschreien, aber ich könnte mir vorstellen, dass hier schon des Lösels Rätsung liegt.

Dankesehr, ich werds gleich versuchen. Gott sei Dank ist das der Teil, den ich aus dem Toturial reinkopiert habe ;)

Mit freundlichen Grüßen
Northon

[northon]

Habe die von dir gefundenen Fehler ausgebessert, wie ich nun aber im Aufruf (siehe HTML!) einen weiteren MouseOver-Bereich deklarieren kann, ist immer noch ungeklärt.

Mit freundlichen Grüßen und ehrlichem Dank

Northon

[Robert Kabinger]

Also habe ich kurzerhand var hans = document.getElementById['DasDivElement']

Soviel ich weis funktioniert das erst nach dem body onload

Wenn du das getElementById einer globalen Variable zuweisen willst funktioniert es auch nicht.

Du wirst das Element also übergeben müssen

[northon]

Sodala, habs soeben gepackt!

Falls noch jemanden die Lösung meines Problems interessiert, bitte sagen, aber falls den Thread eh keiner mehr liest/braucht dauert es mir nun zu lange alles zu erklären.

Danke für eure Mitarbeit!

Schönen Abend,
mit freundlichen Grüßen
Northon