✔ Mehrere ids bei "getElementById" mit for-Schleife

[Tapir]

Hi Forum

Der tapir steht im Wald. Wegen einem ultra-profanen Problem. Deswegen ersuche ich Euch nun um Eure Hilfe (auf das Risiko hin, eins auf die Kappe zu kriegen... :-D)

Folgender Code soll divs zeigen und wieder verstecken. Mehrere divs. Die aktiven divs kriegen dabei auch einen gescheiten z-Index.
Ohne die for()-Schleife (und die 'i'-Sachen) läuft das Ganze auch wunderbar.

<script language="JavaScript">
function showhide()
{
for (var i=0; i<=2; i++;)
{
var zIndex = '100';
if (document.getElementById('pic1' + i).style.visibility == 'visible')
{
document.getElementById('pic1' + i).style.visibility='hidden';
}else{
document.getElementById('pic1' + i).style.visibility='visible'; 
document.getElementById('pic1' + i).style.zIndex++; }
}
}
</script>

Wie gesagt, ich will mehrere IDs ansteuern, die ihrerseits verschiedene CSS-Spezifikationen haben. (Wichtig ist dabei die absolute Positionierung und das "visible:hidden;")
Folgendermassen ruf ich dann die Funktion auf...

<a href="#" onclick="showhide();" >bla1</a>
<a href="#" onclick="showhide();" >bla2</a>

<div id="pic1"><img src="./pics/0.gif" /></div>
<div id="pic2"><img src="./pics/1.gif" /></div>

...und es passiert: NICHTS!

Ja, ich bin blöd. Wer kann mich erlösen?

Vielen Dank!

 

[Sven Mintel]

1. Deine Schleife beginnt bei 0...die IDs fangen aber bei 1 an
2.

document.getElementById('pic1' + i)

..angenommen, i ist 1, dann sucht JS nach pic11...die 1 aus dem "pic1" muss also weg.

 

[webmanie]

hi,
entweder kapier ichs nicht oder die ID der Elemente sind nicht richtig.

Dein JavaScript

if (document.getElementById('pic1' + i).style.visibility == 'visible')
{
document.getElementById('pic1' + i).style.visibility='hidden';
}else{
document.getElementById('pic1' + i).style.visibility='visible'; 
document.getElementById('pic1' + i).style.zIndex++; }

Bei dir ist aber die getElementById pic1 + i also beim ersten
durchlauf pic10 beim zweiten pic11 usw.

Dein HTML

<div id="pic1"><img src="./pics/0.gif" /></div>
<div id="pic2"><img src="./pics/1.gif" /></div>

Im HTML hast du aber nur die IDs pic1 und pic2

probiers einfach mit

for (var i=1; i<=3; i++;)
{
var zIndex = '100';
if (document.getElementById('pic' + i).style.visibility == 'visible')
{
document.getElementById('pic' + i).style.visibility='hidden';
}else{
document.getElementById('pic' + i).style.visibility='visible'; 
document.getElementById('pic' + i).style.zIndex++; }
}

gruss

 

[Tapir]

Hi

Danke für die Antworten.
Das war tatsächlich inkonsistent. Aber auch wenn ich folgendes schreibe und die div-ids mit "pic0" und "pic1" aufrufe, läufts ned.
Ich glaube, es liegt an der Syntax der for-Schleife. Ohne diese (also wenn ich nur eine id aufrufe) läufts...

Gruss

<script language="JavaScript">
function showhide()
{
for (var i=0; i<=2; i++;)
{
var zIndex = '100';
if (document.getElementById('pic' + i).style.visibility == 'visible')
{
document.getElementById('pic' + i).style.visibility='hidden';
}else{
document.getElementById('pic' + i).style.visibility='visible'; 
document.getElementById('pic' + i).style.zIndex++; }
}
}
</script>

 

[webmanie]

hi,
den einzigen Tip den ich dir noch geben kann, ist ein alert auf
document.getElementById('pic' + i) in der for Schleife wenn da null angezeigt wird dann kann das Element im DOM nicht gefunden werden.

oder du probierst mal anstatt 'pic' => "pic"

gruss

 

[Tapir]

Hallo nochmal

Der Fehler war tatsächlich syntax-bedingt. (Ich war mehr blind als blöd: Hatte in der for()-Schleife ein ; nach i++ geschrieben)
Der Fehler war aber leider auch ein logischer. (Also definitiv blöd!) Ich wollte eigentlich, dass die Funktion per Event-Handler für "pic1" ODER "pic2" aufrufbar ist, also dass pro Link ein div sichtbar wird. Stattdessen werden (logischerweise) beide sichtbar.

Tja. Denken ist Glückssache. Zumindest bei mir

Gruss

 

[Tapir]

Hi nochmal

Da ich hier wegen einem ";" einen Fred eröffnet hab, fühl ich mich auch verpflichtet, ihn ordentlich abzuschliessen. Nein, nicht mit einem ";" - sondern mit einer Erläuterung für andere interessierte Anfänger.

Entweder will man mehrere ids *gleichzeitig* mit derselben Funktion ansprechen. Das geht dann tatsächlich so wie oben beschrieben (Aber ohne ";" am Schluss der for()-Schleife

Oder man will, dass mehrere ids bei Aufruf mittels Event-Handler dieselbe Funktion durchlaufen können - aber einzeln. Naja, dann muss man einfach die einzelnen Parameter an die Funktion übergeben.

Mein Beispiel zeigt und versteckt also Bilder (innerhalb von div-Containern) und bringt sie wieder zum Erscheinen.

Hier das Rezept:

<script language="JavaScript">
var zIndex = '100';

function showhide(elementId)
{	
    if (document.getElementById('pic' + elementId).style.visibility == 'visible')
    {
    document.getElementById('pic' + elementId).style.visibility='hidden';
    zIndex--;
    document.getElementById('pic' + elementId).style.zIndex= zIndex;
    }
    else
    {
    document.getElementById('pic' + elementId).style.visibility='visible'; 
    zIndex++;
    document.getElementById('pic' + elementId).style.zIndex= zIndex;
    }
}
</script>

Und dann nur noch die Funktion in html abschmecken

<a href="#" onclick="showhide(1);" >bla</a>
<a href="#" onclick="showhide(2);" >blubb</a>

<div id="pic1"><img src="./pics/0.gif" /></div>
<div id="pic2"><img src="./pics/1.gif" /></div>

Und mit einer Prise css würzen:

#pic1
{
position: absolute;
visibility: hidden;
top: 59px;
left: 21px;
width: 280px;
height: 210px;
}

#pic2
{
position: absolute;
visibility: hidden;
top: 59px;
left: 153px;
width: 280px;
height: 210px;
}

Hoffentlich hat sich mein Abstecher in die Wirrungen der .js-Syntax auf diese Weise noch für den Einen oder Anderen gelohnt...

lg, tapir