Mehrere id´s - Was ist falsch?

[chris]

Hi zusammen, könnt ihr mir weiter helfen, was an dem code falsch ist?

  
function show(me)  
{  
 for(i=1; i<=10; i++) //angenommen es gibt test1-test10  
 {  
  var tmplnk = me+i;  
  var tmpcnt = i+ueber;  
  if(tmplnk == me)  
  {  
   document.getElementById(me).style.display = 'block';  
   document.getElementById(tmpcnt).style.backgroundColor = '#000000';  
  }  
  else  
  {  
   document.getElementById(me).style.display = 'none';  
   document.getElementById(tmpcnt).style.backgroundColor = '#ffffff';  
  }  
 }  
}  

Und im body-bereich wird ein Link so aufgerufen:

<table>
  <tr>
   <td height="10" align="center" id="1ueber">
    <a href="javascript:show('test1')">Testversuch1</a>
   </td>
  </tr>
  <tr>
   <td>
    <div id="test1" class="margin" style="display:none;">
     <center>12345</center>
    </div>
   </td>
  </tr>
  <tr>
   <td height="10" align="center" id="2ueber">
    <a href="javascript:show('test2')">Testversuch2</a>
   </td>
  </tr>
  <tr>
   <td>
    <div id="test2" class="margin" style="display:none;">
     <center>12345</center>
    </div>
   </td>
  </tr>
.
.
.usw...
</table>

Mit dieser function öffnet sich garkein Link.
Einmal soll mit einer Id (die id mit prefix) die Hintergrundfarbe der Tabellenzelle geändert werden, sobald der Link geöffnet wurde. Und zum zweiten sollen alle anderen Links geschlossen werden, sobald ich einen Link anklicke. Hoffe das ist einigermaßen verständlich?!

Nun hatte ich bereits Tips aus dem Forum bekommen, aber wahrscheinlich ist der Beitrag jetzt schon zu alt, dass ihn keiner mehr ließt und ich keine Antworten bekomme. Bitte nicht löschen.

Gruß Chris

[MudGuard]

Hi,

Hi zusammen, könnt ihr mir weiter helfen, was an dem code falsch ist?

<a href="javascript:show('test1')">Testversuch1</a>
function show(me)

me enthält also einen String.

var tmplnk = me+i;

In tmplnk befindet sich jetzt der übergebene String, an den noch eine Zahl (der Schleifenzähler) angehängt wird.
Du sorgst also dafür, daß tmplnk auf jeden Fall einen anderen Wert als me hat.

if(tmplnk == me)

Hier vergleichst Du, ob tmplnk den gleichen Wert hat wie me, was aber niemals der Fall sein kann, da Du ja oben dafür gesorgt hast, daß die Werte unterschiedlich sind.

<td height="10" align="center" id="1ueber">

id-Werte dürfen nicht mit einer Ziffer beginnen.

cu,
Andreas

[chris]

me enthält also einen String.

var tmplnk = me+i;

In tmplnk befindet sich jetzt der übergebene String, an den noch eine Zahl (der Schleifenzähler) angehängt wird.
Du sorgst also dafür, daß tmplnk auf jeden Fall einen anderen Wert als me hat.

if(tmplnk == me)

Hier vergleichst Du, ob tmplnk den gleichen Wert hat wie me, was aber niemals der Fall sein kann, da Du ja oben dafür gesorgt hast, daß die Werte unterschiedlich sind.

Mhh, klingt logisch. Wie kann ich es denn richtig machen?
Habe den Code ja auch von einem User bekommen, der mir helfen wollte.
Mit diesem me+i sollte ja bezweckt werden, dass sich alle anderen Links schließen, sobald ein Link angeklickt wurde.

<td height="10" align="center" id="1ueber">

id-Werte dürfen nicht mit einer Ziffer beginnen.

Ok, das habe ich geändert. id="ueber1" und in der funktion habe ich aus i+ueber -- ueber+i gemacht. Richtig?

Danke schonmal

[steckl]

Hi,

Mhh, klingt logisch. Wie kann ich es denn richtig machen?
Habe den Code ja auch von einem User bekommen, der mir helfen wollte.
Mit diesem me+i sollte ja bezweckt werden, dass sich alle anderen Links schließen, sobald ein Link angeklickt wurde.

Du koenntest an das Script nur die Nummer uebergeben, also anstat von show('test1') koenntest du schreiben show(1), dann kannst du Script den String mit

...
var tmplnk = "test"+i;
var tmpcnt = "ueber"+i;
if(i == me)
{
   document.getElementById(tmplnk).style.display = 'block';
   document.getElementById(tmpcnt).style.backgroundColor = '#000000';
}
else
{
   document.getElementById(tmplnk).style.display = 'none';
   document.getElementById(tmpcnt).style.backgroundColor = '#ffffff';
}
...

So sollte es eigentlich klappen. Habs aber nicht ausprobiert.

mfG,
steckl

[chris]

So sollte es eigentlich klappen. Habs aber nicht ausprobiert.

Nein, leider auch nicht...

Du koenntest an das Script nur die Nummer uebergeben, also anstat von show('test1') koenntest du schreiben show(1), dann kannst du Script den String mit

Und was müsste dann als id stehen? Also mit 1 bzw test1 geht es nicht...

...
var tmplnk = "test"+i;
var tmpcnt = "ueber"+i;
if(i == me)
{
   document.getElementById(tmplnk).style.display = 'block';
   document.getElementById(tmpcnt).style.backgroundColor = '#000000';
}
else
{
   document.getElementById(tmplnk).style.display = 'none';
   document.getElementById(tmpcnt).style.backgroundColor = '#ffffff';
}
...

mfG,
steckl

[steckl]

Hi,

So sollte es eigentlich klappen. Habs aber nicht ausprobiert.
Nein, leider auch nicht...

Hab es mal ausprobiert und so klappt es bei mir (im FF1.5), ausser ich habe dein Problem nicht richtig verstanden:

<html>
<head>
<script>
function show(me)
{
    for(i=1; i<=2; i++) //angenommen es gibt test1-test2
    {
       var tmplnk = "test"+i;
       var tmpcnt = "ueber"+i;

if(i == me)
       {
          document.getElementById(tmplnk).style.display = '';
          document.getElementById(tmpcnt).style.backgroundColor = '#000000';
       }
       else
       {
          document.getElementById(tmplnk).style.display = 'none';
          document.getElementById(tmpcnt).style.backgroundColor = '#ffffff';
       }
    }
}
</script>
</head>
<body>
 <table>
  <tr>
   <td height="10" align="center" id="ueber1">
    <a href="javascript:show(1)">Testversuch1</a>
   </td>
  </tr>
  <tr>
   <td>
    <div id="test1" class="margin" style="display:none; text-align: center;">
     12345
    </div>
   </td>
  </tr>
  <tr>
   <td height="10" align="center" id="ueber2">
    <a href="javascript:show(2)">Testversuch2</a>
   </td>
  </tr>
  <tr>
   <td>
    <div id="test2" class="margin" style="display:none; text-align: center;">
     abc
    </div>
   </td>
  </tr>
</table>

</body>
</html>

Falls es bei dir immer noch nicht klappen sollte hilft dir vielleicht auch ein Blick in die JS-Konsole deines Browsers weiter.

mfG,
steckl

[chris]

Hab es mal ausprobiert und so klappt es bei mir (im FF1.5), ausser ich habe dein Problem nicht richtig verstanden:

Stimmt, so klappt es. Hatte einen kleinen fehler drin. :)

Aber jetzt habe ich nicht bedacht, dass ich bei manchen divs die sichtbar werden, weitere links verbaut habe die auch über diese funktion aufgerufen werden. Kann man da noch eine funktion verbauen, dass wenn innerhalb eines links, ein weiterer link verbaut ist, dieser nicht sofort verschwindet? (z.B. mit show(1.1) oder so?)

Also das würde dann so aussehen:

<tr>
   <td height="10" align="center" id="ueber1">
    <a href="javascript:show(1)">Testversuch1</a>
   </td>
  </tr>
  <tr>
   <td>
    <div id="test1" class="margin" style="display:none; text-align: center;">
<table>
<tr>
 <td height="10" align="center">
   <a href="javascript:show('unterlink')">UNTERLINK</a>

<div id="unterlink" class="margin" style="display:none; text-align: center;">
TEXT vom UNTERLINK
   </div>
 </td>
</tr>
</table>
    </div>
   </td>
  </tr>

[chris]

Aber jetzt habe ich nicht bedacht, dass ich bei manchen divs die sichtbar werden, weitere links verbaut habe die auch über diese funktion aufgerufen werden. Kann man da noch eine funktion verbauen, dass wenn innerhalb eines links, ein weiterer link verbaut ist, dieser nicht sofort verschwindet? (z.B. mit show(1.1) oder so?)

Ach, ich habe mir überlegt, dass ich das so nicht brauche. Habe es anders gemacht!

Aber eins würde ich doch gerne noch haben wollen:

@steckl, jetzt funktioniert es ja wunderbar wenn ich auf einen anderen Link klicke, schließt sich der aktuell noch offen ist.

Aber wenn ich auf den Link wieder klicke, der gerade offen ist, passiert nichts. Da würde ich gern auch haben, dass er sich dann auch schließt.

Ist das möglich?

[steckl]

Hi,

@steckl, jetzt funktioniert es ja wunderbar wenn ich auf einen anderen Link klicke, schließt sich der aktuell noch offen ist.

Aber wenn ich auf den Link wieder klicke, der gerade offen ist, passiert nichts. Da würde ich gern auch haben, dass er sich dann auch schließt.

Ist das möglich?

Ja
Du musst bei der if-Abrage zusaetzlich den aktuellen Zustand von display abfragen und dieses nur setzen, wenn es auf "none" steht. Also musst du die if-Abfrage so abaendern:
if(i == me && document.getElementById(tmplnk).style.display == 'none')
{
    //anzeigen
}
else
{
    //display auf 'none' stellen
}

mfG,
steckl

[chris]

Du musst bei der if-Abrage zusaetzlich den aktuellen Zustand von display abfragen und dieses nur setzen, wenn es auf "none" steht. Also musst du die if-Abfrage so abaendern:

Funktionier Super! Danke Dir!

Eine letzte Frage habe ich noch: :)

Ich wollte mir einfach eine option (tmpclt) in der funktion dazu schreiben:

function show(me)
{
 for(i=1; i<=5; i++) //angenommen es gibt test1-test10
 {
  var tmplnk = "test"+i;
  var tmpcnt = "ueber"+i;
  var tmpclt = "unter"+i;
if(i == me && document.getElementById(tmplnk).style.display == 'none')
{
  document.getElementById(tmplnk).style.display = '';
   document.getElementById(tmpcnt).style.backgroundColor = '#000000';
   document.getElementById(tmpclt).style.backgroundColor = '#AA0000';
  }
  else
  {
   document.getElementById(tmplnk).style.display = 'none';
   document.getElementById(tmpcnt).style.backgroundColor = '#ffffff';
   document.getElementById(tmpclt).style.backgroundColor = '#ffffff';
  }
 }
}

Leider funktioniert es dann auch nicht mehr. Kann man das nicht einfach so schreiben?

Wollte damit eine andere Zeile/Zelle farblich gestalten. Die allerdings innerhalb des angezeigten divs liegt, wo auch schon die ID verwendet wird. Geht das dann nicht?

[steckl]

Hi,

Eine letzte Frage habe ich noch: :)

wiedermal ;)

Leider funktioniert es dann auch nicht mehr. Kann man das nicht einfach so schreiben?

Heisst das, dass garnichts mehr funktioniert, oder nur das was du neu eingebaut hast nicht das macht was es soll?
Kennst du die JS-Konsole vom Firefox? Dort stehen meist sehr aufschlussreiche Fehlermeldungen, wenn du einen Fehler in deinem Script hast.

Wollte damit eine andere Zeile/Zelle farblich gestalten. Die allerdings innerhalb des angezeigten divs liegt, wo auch schon die ID verwendet wird. Geht das dann nicht?

Sollte eigentlich keine Probleme bereiten, falls alle IDs die du ansprichst einmal existieren.

mfG,
steckl

[chris]

Eine letzte Frage habe ich noch: :)
wiedermal ;)

:o)

Leider funktioniert es dann auch nicht mehr. Kann man das nicht einfach so schreiben?
Heisst das, dass garnichts mehr funktioniert, oder nur das was du neu eingebaut hast nicht das macht was es soll?
Kennst du die JS-Konsole vom Firefox? Dort stehen meist sehr aufschlussreiche Fehlermeldungen, wenn du einen Fehler in deinem Script hast.

Also es lag daran, das die id bei manchen noch nicht drin stand. Hatte es nur testweise bei zwei probiert gehabt. Jetzt die id bei allen hinzugefügt und jetzt geht es?!

JS-Konsole gucke ich mir mal an!

Gruß

[Struppi]

JS-Konsole gucke ich mir mal an!

Was heißt gucke ich mir mal an?
Ohne bist du aufgeschmissen, dass ist das einzige wikrlich notwewndige Hilfmittel beim JS programmieren, dann könntest du dir vermutlich auch solche Fragen "das funktioniert nicht, warum?" sparen, weil du siehst warum es nicht funktioniert.

Und noch leichter wird die Fehlersuche, wenn du bei den Skripten etwas aufpaßt, z.b. keine globalen Variabeln verwenden und Rückgabewerte prüfen. Dann wär deine Frage schon viel früher gelöst gewesen.

Struppi.