Jana Hansen: Muss bei JavaScript-Menu doppelklicken damit Div öffnet

Hallo Leute hab ein Problem,
Ich hab einen Seite in der ich mir ein Menu mit JavaScript gebaut habe.
Das heißt wenn ich auf einen Menu-Button klicke öffnet ein Div mit Inhalt.
Jetzt ist das Problem, immer wenn ich die Seite das erste mal geladen habe, das ich auf den Menu-Button 2 mal klicken muss damit das Div öffnet und dann funktioniert es mit einem klick.

Quelltext JavaScript (Das Script ist nicht von mir sondern aus dem Internet, ich kann aber nicht mehr sagen von Wem):

var box = new Array();
box[0] = 'ltg1';
box[1] = 'ltg2';
// box[2] = 'text3';
// usw.

function show(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}

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

Quelltext HTML:

<html>
  <head>
        <script language="JavaScript" src="script/mein_externes_script.js"></script>
      </head>
  <body>
      <div class="text">
<div id="menu">
<a href="#" onClick="show('ltg1')">button1</a>
<a href="#" onClick="show('ltg2')">button2</a>
</div>
<div id="ltg0">
Inhalt DIV 1
</div>
<div id="ltg1">
Inhalt DIV 2
</div>
     </div>
  </body>
</html>

Vielleicht habt ihr irgendeine Idee wie ich das Problem lösen kann.
Vielen Dank

  1. Hi,

    Jetzt ist das Problem, immer wenn ich die Seite das erste mal geladen habe, das ich auf den Menu-Button 2 mal klicken muss damit das Div öffnet und dann funktioniert es mit einem klick.

    und welche Debug-Ausgaben hast Du mit welchem Ergebnis durchgeführt?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
  2. Hi,

    ich vermute mal, dass das hier dafür verantwortlich ist:

    if(document.getElementById(id).style.display=="none")

    Das Element wird standardmßig nicht den wert display:none im style haben.

    Alternativ kannst du mit getComputedStyle arbeiten. Oder überprüfen ob
    document.getElementById(id).offsetWidth === 0 ist.

    Gruß!

    1. Hi,

      ich vermute mal, dass das hier dafür verantwortlich ist:

      if(document.getElementById(id).style.display=="none")

      Das Element wird standardmßig nicht den wert display:none im style haben.

      Alternativ kannst du mit getComputedStyle arbeiten. Oder überprüfen ob
      document.getElementById(id).offsetWidth === 0 ist.

      ... oder du gibst deinen Divs den passenden Style mit:

      <div id="ltg0" style="display:none;">
      Inhalt DIV 1
      </div>

      gruß

  3. @@Jana Hansen:

    Hallo Leute hab ein Problem,
    Ich hab einen Seite in der ich mir ein Menu mit JavaScript gebaut habe.

    _Das_ ist ein schwerwiegendes Problem, welches du beheben solltest.

    Das heißt wenn ich auf einen Menu-Button klicke öffnet ein Div mit Inhalt.

    Oder auch nicht, weil bei etlichen Besuchern deiner Seite gar kein JavaScript ausgeführt wird. Darunter sind äußerst wichtige Besucher.

    Vielleicht habt ihr irgendeine Idee wie ich das Problem lösen kann.

    Setze keine Navigation ein, die nur mit JavaScript funktioniert.

    Live long and prosper,
    Gunnar

    --
    Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
    1. Der Text ist doch trotzdem für die Robots im html Code enthalten. Er ist nur nicht für die Benutzer sichtbar. Sie können sich den gewünschten Text mit dem JavaScript sichtbar machen.

      Wenn ich nicht irre lesen doch Robots Webseiten nicht wie benutzer sondern sie lesen den Quellcode aus.

      1. Der Text ist doch trotzdem für die Robots im html Code enthalten. Er ist nur nicht für die Benutzer sichtbar. Sie können sich den gewünschten Text mit dem JavaScript sichtbar machen.

        was ist mit benutzern ohne javascript oder benutzern die keine maus haben oder verwenden wollen?

        Wenn ich nicht irre lesen doch Robots Webseiten nicht wie benutzer sondern sie lesen den Quellcode aus.

        das kommt auf den robot an - ich bin mir sicher google verfügt über die technologie, den quelltext inclusive dem css zu parsen (das kann der w3-css-validator auch bedingt) um so festzustellen, ob gewisse inhalte versteckt im quelltext liegen oder nicht - ggf werden alle versteckten inhalte überhaupt ignoriert - dass versteckter text weniger gut gewertet wird, könnte somit auch sein - wie negativ sich das bei einer menüführung auswirkt kann ich nicht sagen, aber ich würde mich auf nichts dergleichen verlassen

        fakt ist aber, dass deine seite nicht barrierefrei ist - jemand ohne javascript kann die seite nicht bedienen, zudem sind klappmenüs auf small-screen-geräten (pdas, mobiltelefone usw) eine zumutung

  4. Danke für die Antworten, hab das Problem gelöst.

    Nachdem ich nochmal durchgesehen habe, habe ich entdeckt das ich nur None und Block vertauscht habe.

    Hier der neue JavaScript Code, einfach mit dem alten vergleichen um die Fehler zu sehen.

    var box = new Array();
    box[0] = 'ltg1';
    box[1] = 'ltg2';
    // box[2] = 'text3';
    // usw.

    function show(id)
    {
            if(document.getElementById(id).style.display=="none")
            {
                    for(i=0;i<box.length;i++)
                    {
                            document.getElementById(box[i]).style.display="block";
                    }

    document.getElementById(id).style.display="none";
            }
            else
            {
                    document.getElementById(id).style.display="block";
            }
    }

    1. Hi

      function show(id)
      {
              if(document.getElementById(id).style.display=="none")

      (Wenn's nicht angezeigt wird...)

      {
                      for(i=0;i<box.length;i++)
                      {
                              document.getElementById(box[i]).style.display="block";
                      }

      (...dann zeig alle an...)

      document.getElementById(id).style.display="none";

      (...und zeig es selbst nicht an.)

      }
              else
              {
                      document.getElementById(id).style.display="block";
              }
      }

      Ich glaub das nicht, daß das so funktioniert.

      gruß
      peter

      1. Ja stimmt, es geht zwar beim ersten klick auf aber nicht wieder zu

        1. Hi,

          so wies zuerst war, wars OK, nur deine DIVs bräuchten dann auch den Style "display:none".

          oder du fragst ab, ob display nicht auf "block" gesetzt ist, dann sollte es auch gehen:

          function show(id)
          {
                  if(document.getElementById(id).style.display!="block")
                  {
                          for(i=0;i<box.length;i++)
                          {
                                  document.getElementById(box[i]).style.display="none";
                          }

          document.getElementById(id).style.display="block";
                  }
                  else
                  {
                          document.getElementById(id).style.display="none";
                  }
          }

          gruß
          peter