Ronald Beaugeois: umständlich geschriebenes javascript.

<html>
hallo miteinander,

hätte da noch eine frage..
habe folgenden Code, der auch wunderbar funktioniert. in Explorer und Netscape6 jedenfalls.
es geht darum das der link der angeklickt wird sich rot färbt und die anderen grau umgefärbt werden. so das man immer sieht in welchem menüpunkt man sich gerade befindet. sinn macht das ganze erst wenn man noch mit untermenüs arbeitet bei denen das dann genauso funktioniert. und man somit zwei links die rot sein müssen. sonst könnte ich ja natürlich auch im bodytag die alink eigenschaften verwenden.
wenn man jetzt den code genauer betrachtet, sieht das ganze aber irgendwie umständlich aus. da ich den aufruf der javascriptfunktion immerwieder ausführen lasse. und wenn ich 10 menüpunkte habe und ich bei einem oncklick alle 10 links umfärben muß, ich ewiglange <a> tags bekomme. kann man das irgendwie kürzer schreiben? vielleicht hat mich ja jemand verstanden. und hat ne idee...

hier der beispielcode

<head>
<title>test</title>
<script language="javascript">

function NeueKlasse(vorher,nachher)
{
  if (document.all)
  {
    for (i=0;i<document.all.length;i++)
    {
      if (document.all[i].className==vorher)
      {
      document.all[i].className=nachher;
      }
    }
  }

if (document.getElementById && !document.all)
  {
    var elemente=document.getElementsByTagName("*");
    for (i=0;i<elemente.length;i++)
    {
      if (elemente[i].className==vorher)
      {
      elemente[i].className=nachher;
      }
    }
  }

}
</script><style type="text/css">
<!--
.dunkler { color: #666666}
.dunkler2 { color: #666666 }
.dunkler3 { color: #666666 }
.heller { color: #FF0000 }
.heller2 { color: #FF0000 }
.heller3 { color: #FF0000 }
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<a href="#" class="dunkler" onclick="NeueKlasse('dunkler','heller');NeueKlasse('heller2','dunkler2');NeueKlasse('heller3','dunkler3')">> eins</a><br>
<br>
<a href="#" class="dunkler2" onclick="NeueKlasse('dunkler2','heller2');NeueKlasse('heller','dunkler');NeueKlasse('heller3','dunkler3')">> zwei</a><br>
<br>
<a href="#" class="dunkler3" onclick="NeueKlasse('dunkler3','heller3');NeueKlasse('heller','dunkler');NeueKlasse('heller2','dunkler2')">> drei</a><br>

</body>
</html>

gruß ...ron

  1. hi

    das ist wirklich unnötig kompliziert :)

    JS:
    function makered(Opfer){
    document.getElementsById("link1").style.color="#666666";
    document.getElementsById("link2").style.color="#666666";
    document.getElementsById("link3").style.color="#666666";
    document.getElementsById("link4").style.color="#666666";
    document.getElementsById("link5").style.color="#666666";
    document.getElementsById(opfer).style.color="#FF0000";
    }

    CSS:
    a.link{color:#666666;}

    HTML:
    <a onclick="makered(link1)" id="link1" class="link">
    <a onclick="makered(link2)" id="link2" class="link">
    <a onclick="makered(link3)" id="link3" class="link">
    <a onclick="makered(link4)" id="link4" class="link">
    <a onclick="makered(link5)" id="link5" class="link">

    beworkt ansich das gleiche. Man kann jetzt die Sammlung auch noch über eine for-Schleife "abernten"..
    das zusätzliche document.all ist seit IE5.0 nicht mehr nötig.

    1. hi

      das ist wirklich unnötig kompliziert :)

      JS:
      function makered(Opfer){
      document.getElementsById("link1").style.color="#666666";
      document.getElementsById("link2").style.color="#666666";
      document.getElementsById("link3").style.color="#666666";
      document.getElementsById("link4").style.color="#666666";
      document.getElementsById("link5").style.color="#666666";
      document.getElementsById(opfer).style.color="#FF0000";
      }

      CSS:
      a.link{color:#666666;}

      HTML:
      <a onclick="makered(link1)" id="link1" class="link">
      <a onclick="makered(link2)" id="link2" class="link">
      <a onclick="makered(link3)" id="link3" class="link">
      <a onclick="makered(link4)" id="link4" class="link">
      <a onclick="makered(link5)" id="link5" class="link">

      beworkt ansich das gleiche. Man kann jetzt die Sammlung auch noch über eine for-Schleife "abernten"..
      das zusätzliche document.all ist seit IE5.0 nicht mehr nötig.

    2. hi

      das ist wirklich unnötig kompliziert :)

      hab ich mir gedacht...*g*

      vielen dank für deine hilfe, sehr nett.
      hilft mir echt weiter.
      der vorige beitrag von mir war nur ein versehen, zu schnell geklickt.

      gruß ron

      1. hi

        das ist wirklich unnötig kompliziert :)

        hab ich mir gedacht...*g*

        vielen dank für deine hilfe, sehr nett.
        hilft mir echt weiter.
        der vorige beitrag von mir war nur ein versehen, zu schnell geklickt.

        so einen hatte ich vor ca. 'ner Woche auch :) - passiert hier öfters

        1. hallo Kai,

          erstma vielen dank für deine geniale verkürzung des skripts.
          wenn es zum schluß funktioniert ist das eine enorme erleichterung bei der umsetzung der seite an der ich gerade arbeite.

          es funktioniert auch bis auf die letzte zeile des javascripts.
          da meckert er mir immer an das ein objekt erwartet wird. die vorhergehenden führt er aus.

          function makered(opfer){
          document.getElementById("link1").style.color="#cccccc";
          document.getElementById("link2").style.color="#cccccc";
          document.getElementById("link3").style.color="#cccccc";
          document.getElementById("link4").style.color="#cccccc";
          document.getElementById("link5").style.color="#cccccc";
          document.getElementById("link6").style.color="#cccccc";
          document.getElementById("link7").style.color="#cccccc";
          document.getElementById("link8").style.color="#cccccc";
          document.getElementById(opfer).style.color="#FF0000";
          }

          er kann irgendwie mit der opfer variable nichts anfangen. obwohl mir alles logisch und richtig erscheint.
          verändert hatte ich nur das getElementsById zu getElementById, da war das s zuviel und Opfer war in der ersten zeile groß geschrieben und in der letzen klein. was ja javascript nicht mag. aber das sind ja nur flüchtigkeitsfehler die beim tippen passieren. jetzt bin ich jedoch mit meinem latein wieder mal am ende...
          weißt du woran es liegen kann?

          gruß ron..

          ps. hatte dir den text auch auf deine angegebene email geschrieben, deshalb nicht wundern...

          1. ho

            function makered(opfer){
            document.getElementById(opfer).style.color="#FF0000";
            }

            er kann irgendwie mit der opfer variable nichts anfangen. obwohl mir alles logisch und richtig erscheint.

            muh :(
            warum sollte JS auch nur logisch sein... ein Workaround wäre ein Erweitern der onclick="" zu onclick="makered();this.style.color='#FF0000';" (in der Funktion selbst wird dann die Klammer geleert und die letzte Zeile entfällt..

            1. und alles wendete sich zum guten.
              also wenn Stefan Münz hier der Gott ist, dann bist du mein Schutzengel.

              vielen Dank ...ron

              1. hi

                und alles wendete sich zum guten.
                also wenn Stefan Münz hier der Gott ist, dann bist du mein Schutzengel.

                ich dachte eher der Drache, der Feuer spuckt, wenn hier einer sich darüber aufregt, wenn grausamster HTML-Müll nicht funktioniert :)