getElementByID(Variable) will einfach nicht funktionieren

[screamer007]

Hallo,

Ich habe schon einiges probiert von dem was ich durch suchen gefunden habe, aber irgendwie geht das alles nicht.

Zunächst muss ich sagen, dass ich totaler Neuling bei JavaScript bin, aber mit HTML un C++ kenn ich mich schon ein wenig aus, also ich versteh durchaus auch bissl was bei JavaScript ;)

Aber ich hoffe ihr könnt mir hierbei weiterhelfen.

Und zwar möchte ich gerne mehrere Links auf einer Seite unterbringen und wenn man dann das Bild vor dem Link anklickt soll unter dem Link ein iFrame aufpoppen und zu schließen soll es auch sein.

Ich habe hier den Quelltext der für ein "Fenster" funktioniert, sobald ich aber mehrere Links einfüge, gehen alle mit einmal auf bzw. zu.

--------------------------------------------------------------

<script language="javascript">
window.onload = hideTable;
a=0;
function hideTable() {
if(a==0) {
document.getElementById('hidetable1').innerHTML="<div style="font-size:small;background-color:#DAEAC2;"></div>";
document.getElementById('changepic1').src="../image/plus.gif";
document.getElementById('changetext1').innerHTML="Alphabetisches Teamverzeichnis anzeigen";
a=1; }
else {
document.getElementById('hidetable1').innerHTML="<iframe src="drucken.htm" width="100%" name="iFrame" border="0" frameborder="0" scrolling="no" id="listFrame"></iframe>";
document.getElementById('changepic1').src="../image/minus.gif";
document.getElementById('changetext1').innerHTML="Alphabetisches Teamverzeichnis minimieren";
a=0; }
}
  function setIFrameHeight(bSize)
{
  document.getElementById("listFrame").style.height = bSize + 'px';
}
</script>

<div><a href="javascript: hideTable();"><img alt="" src="../image/plus.gif" id="changepic1" style="border: medium none ;"></a> <span id="changetext1" class="gen-h2">bla1 anzeigen</span></div>
<div style="border: 1px solid rgb(160, 160, 160); width: 600px;" id="hidetable1"><div style="font-size: small; background-color: rgb(218, 234, 194);"></div></div>

--------------------------------------------------------------

Und dann habe ich hier einen selbstversuch der immer damit endet, dass folgende Fehlermeldung kommt:

'document.getElementById(...)' ist Null oder kein Objekt

Hier der Quellcode:

--------------------------------------------------------------

<script language="javascript">
a=0;
b=0;

function hideTable(b) {

alert("a = " + a + ", b = " + b);

hidetable = 'hidetable' + b;
changepic = 'changepic' + b;
changetext = 'changetext' + b;

alert("hidetable = " + hidetable + ", changepic = " + changepic + ", changetext = " + changetext);

if(a==0) {
document.getElementById('hidetable').innerHTML="<div style="font-size:small;background-color:#DAEAC2;"></div>";
document.getElementById('changepic').src="../image/plus.gif";
document.getElementById('changetext').innerHTML="bla anzeigen";
a=1; }
else {
document.getElementById('hidetable').innerHTML="<iframe src="beschreibung.htm" width="100%" name="iFrame" border="0" frameborder="0" scrolling="no" id="listFrame"></iframe>";
document.getElementById('changepic').src="../image/minus.gif";
document.getElementById('changetext').innerHTML="bla minimieren";
a=0; }
}

function setIFrameHeight(bSize)
{
  document.getElementById("listFrame").style.height = bSize + 'px';
}
</script>

<div><a href="javascript: hideTable(0);"><img alt="" src="../image/plus.gif" id="changepic0" style="border: medium none ;"></a> <span id="changetext0" class="gen-h2">bla1 anzeigen</span></div>
<div style="border: 1px solid rgb(160, 160, 160); width: 600px;" id="hidetable0"><div style="font-size: small; background-color: rgb(218, 234, 194);"></div></div>

--------------------------------------------------------------

Recht herzlichen Dank schon ma.

MfG ScReAmEr

[davidp]

Hi,

<script language="javascript">
window.onload = hideTable;

Funktionen in denen Elemente im Dokument vorhanden sein müssen, kann man nicht bevor das dokument aufgebaut ist, ausführen.
Entweder du stellst das Skript an das Ende, oder du machst ein window.setTimeout('hideTable',100); (nach 100 millisek ist das dokument fertig aufgebaut)

lg, david

[Steel]

Moinsen!

<script language="javascript">
window.onload = hideTable;

Funktionen in denen Elemente im Dokument vorhanden sein müssen, kann man nicht bevor das dokument aufgebaut ist, ausführen.
Entweder du stellst das Skript an das Ende, oder du machst ein window.setTimeout('hideTable',100); (nach 100 millisek ist das dokument fertig aufgebaut)

Oder man benutzt den onload Eventhandler. Und genau das hat er getan.

Script hat im HTML nicht viel verloren. Nur in Ausnahmefaellen solte man dort Javascript haben. Am Besten man befoerdert das ganze Script in eine externe Datei.

Was aber hier nicht die Frage sein sollte. Eine Antwort auf das eigentlich Problem habe ich nicht, denn meine Augen machen da nicht mit, wenn ich das lesen will. Bisher hab ich es ohne Scheiss nicht geschafft mir den Beispielcode komplett anzusehen.

[JürgenB]

Hallo Steel,

Entweder du stellst das Skript an das Ende, oder du machst ein window.setTimeout('hideTable',100); (nach 100 millisek ist das dokument fertig aufgebaut)

Oder man benutzt den onload Eventhandler. Und genau das hat er getan.

nicht oder. setTimeout ist hier einfach Käse, egal ob mit 100ms oder 100s.

Gruß, Jürgen

[Steel]

Heyho Hohey,

Oder man benutzt den onload Eventhandler. Und genau das hat er getan.

nicht oder. setTimeout ist hier einfach Käse, egal ob mit 100ms oder 100s.

Das stimmt natuerlich. Hab mich an dem 'Skript am Ende' festgebissen.

[screamer007]

Evtl. hilft euch diese Seite hier weiter.

http://www.tu-chemnitz.de/mb/WerkzMasch/Deutsch/team.php

Da ist ganz oben ein "Alphabetisches Teamverzeichnis" das man aufklappen kann. Ich wollte jetzt halt lediglich mehrere solcher aufklappbaren Seiten und halt mit anderem Inhalt.

MfG ScReAmEr

[JürgenB]

Hallo screamer007,

... Da ist ganz oben ein "Alphabetisches Teamverzeichnis" das man aufklappen kann. Ich wollte jetzt halt lediglich mehrere solcher aufklappbaren Seiten und halt mit anderem Inhalt.

du kannst den Block einfach kopieren, so oft wie du ihn benötigst. Du misst nur die IDs der Elemente anpassen, also changepic1, changepic2, ... . der Funktion hideTable gibst du die Nummer einfach als Übergabeparameter mit:

<a href="javascript: hideTable(2);"> ... id="changepic2" ... id="changetext2" ... id="hidetable2" ...

und in der Funktion schreibst du:

function hideTable(nr) {  
if(a==0) {  
document.getElementById('hidetable'+nr).innerHTML=...  
document.getElementById('changepic'+nr).src=...  
document.getElementById('changetext'+nr).innerHTML=

Gruß, Jürgen

PS Vorschlag ungetestet, (Tipp-)Fehler möglich, bitte sorgfältig prüfen

[screamer007]

document.getElementById('hidetable'+nr).innerHTML=...

Und genau dieses ('hidetable'+nr) funktioniert irgendwie nicht.

Aber ich habe die Lösung soeben gefunden:

  
<script language="javascript">  
zustand = new Array(10);  
for(var i=0; i<10; i++){zustand[i]=1;}  
  
function hideTable(b) {  
  
hiddentable = 'hiddentable' + b;  
changepic = 'changepic' + b;  
changetext = 'changetext' + b;  
  
if(zustand[b]==0) {  
  document.getElementById(this.changepic).src=...;  
  document.getElementById(this.changetext).innerHTML=...;  
  document.getElementById(this.hiddentable).innerHTML=...;  
  zustand[b]=1;  
  }  
else {...  

Dennoch Danke für die schnellen Antworten.

MfG ScReAmEr

[Steel]

Hi!

Man. Bei dem Code wuerde Jesus ueberlegen, auch nen Saeckchen Kieselsteine zu kaufen...

Ich rate mal dezent herum:

Und dann habe ich hier einen selbstversuch der immer damit endet, dass folgende Fehlermeldung kommt:

Ich nehme mal an das ist der Code, der in Deinem Dokument steht und den anderen Code ersetzt.

document.getElementById('hidetable').innerHTML="<div style="font-size:small;background-color:#DAEAC2;"></div>";
document.getElementById('changepic').src="../image/plus.gif";
document.getElementById('changetext').innerHTML="bla anzeigen";

Ich konnte in deinem Dokument kein Element mit diesen IDs finden. Macht auch irgendwie keinen Sinn grossartig Fallunterscheidungen einzubauen, wenn eh immer die gleichen Elemente angesprochen werden sollen.

document.getElementById('hidetable').innerHTML="<iframe src="beschreibung.htm" width="100%" name="iFrame" border="0" frameborder="0" scrolling="no" id="listFrame"></iframe>";
document.getElementById('changepic').src="../image/minus.gif";
document.getElementById('changetext').innerHTML="bla minimieren";

Dito.

War der Fehler vielleicht, dass Du Deine Variablen schlicht und einfach nicht benutzt hast?

Ansonsten: Nenne bitte Variablen nicht 'hidetable' wenn es eine funktion 'hideTable' gibt. Auch nicht, wenn es eine ID hidetable gibt.