Klassenerweiterung eines Java-Script

Dieses Thema Klassenerweiterung eines Java-Script im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von eselhund, 6. Aug. 2006.

Thema: Klassenerweiterung eines Java-Script Hab hier ein kleines Modell des eigentlichen Problems. Das Problem eigentliche Problem bei der Sache ist dass ich...

  1. Hab hier ein kleines Modell des eigentlichen Problems. Das Problem eigentliche Problem bei der Sache ist dass ich die drei Abschnitte getrennt voneinander steuern möchte.

    Also ich erklärs mal so:
    Ich habe eine Übersichtsseite mit mehreren Diagrammen (ca.15) welche unterhalb der Links sind und durch betätigen der Links verändert sich die Ansicht des Diagramms. Was durch die Farbgebung der einzelnen Links verdeutlicht werden sollte. Deswegen ist auch in diesem Beispiel schon von Start an der erste rot hinterlegt.
    Und immer wenn ich ein anderes anwähle soll natürlich dieses rot hinterlegt werden.

    Nur ist es momentan so, dass es lediglich für ein einziges Diagramm funktionieren würde, da ich die Abschnitte bzw. Diagramme in Klassen einteilen muss damit richtig funktioniert!

    Hoffe das ist nach dem zweitenmal durchlesen verständlich ;)



    Code:
    <html>
    <head>
    <title>Unbenannt</title>
    
    <style type=text/css>
    <!--
    a {
    	font-family: Verdana, Arial;
         color: #000000;
         text-decoration: none;
         background-color: #EEEEEE;
    }
    -->
    </style>
    
    <script type=text/javascript>
     function save(sav)
     {
      document.getElementsByName('peter')[0].value = sav;
     }
     function CChange(name)
     {
      id = name;
      document.getElementById(id).style.color = #FFFFFF; /* farbe des letzten inks */
      document.getElementById(id).style.backgroundColor = #AA00AA; /* Hintergrundfarbe des letzten inks */
      save(id);
     }
     function load(id)
     {
      vall = document.getElementsByName('peter')[0].value;
      document.getElementById(vall).style.color = #000000; /* normale link-farbe */
      document.getElementById(vall).style.backgroundColor = #EEEEEE; /* normale link-Hintergrundfarbe */
      CChange(id);
     }
    
      function red()
      {
       document.getElementById('link1').style.color = #FFFFFF;
       document.getElementById('link1').style.backgroundColor = #AA00AA;
    
       document.getElementById('link4').style.color = #FFFFFF;
       document.getElementById('link4').style.backgroundColor = #AA00AA;
    
       document.getElementById('link7').style.color = #FFFFFF;
       document.getElementById('link7').style.backgroundColor = #AA00AA;
      }
    </script>
    
    </head>
    
    <body onload=javascript:red()>
    
    
    <input type=hidden name=peter value=link1>
    
    <a href=# onclick=javascript:load(this.id) id=link1>bla 1</a>
    <br><br>
    <a href=# onclick=javascript:load(this.id) id=link2>blö 1</a>
    <br><br>
    <a href=# onclick=javascript:load(this.id) id=link3>blub 1</a>
    
    
    <br><br><br><br><br>
    
    
    <a href=# onclick=javascript:load(this.id) id=link4>bla 2</a>
    <br><br>
    <a href=# onclick=javascript:load(this.id) id=link5>blö 2</a>
    <br><br>
    <a href=# onclick=javascript:load(this.id) id=link6>blub 2</a>
    
    
    <br><br><br><br><br>
    
    
    <a href=# onclick=javascript:load(this.id) id=link7>bla 3</a>
    <br><br>
    <a href=# onclick=javascript:load(this.id) id=link8>blö 3</a>
    <br><br>
    <a href=# onclick=javascript:load(this.id) id=link9>blub 3</a>
    
    </body>
    </html>
    * Verschoben aus Anwendungsentwicklung & Scripting *
     
  2. Wenn ich das richtig verstanden habe, sollte es so gehen ;)
    Code:
    <html>
    <head>
    <title>Unbenannt</title>
    
    <style type=text/css>
    <!--
    a {
    	font-family: Verdana, Arial;
    	text-decoration: none;
    }
    
    .diagrammOn {
    	color: #FFFFFF;
    	background-color: #AA00AA;
    }
    
    .diagrammOff {
    	color: #000000;
    	background-color: #EEEEEE;
    }
    
    -->
    </style>
    
    
    <script type=text/javascript>
    
    // Anzahl der Links
    var linkCount = 9 
    
    function changeClass(wo) {
    	// Alle zurücksetzen
    	for(i = 1; i <= linkCount; i++) {
    		document.getElementById(link_+i).className = diagrammOff;
    	}
    	// Ausgewählter Link
    	wo.className = diagrammOn;
    }
    
    </script>
    
    </head>
    
    <body>
    
    
    <a href=# class=diagrammOn onclick=changeClass(this) id=link_1>bla 1</a>
    <br><br>
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_2>blö 1</a>
    <br><br>
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_3>blub 1</a>
    
    
    <br><br><br><br><br>
    
    
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_4>bla 2</a>
    <br><br>
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_5>blö 2</a>
    <br><br>
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_6>blub 2</a>
    
    
    <br><br><br><br><br>
    
    
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_7>bla 3</a>
    <br><br>
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_8>blö 3</a>
    <br><br>
    <a href=# class=diagrammOff onclick=changeClass(this) id=link_9>blub 3</a>
    
    </body>
    </html>
    
     
  3. Nein das funktioniert leider nicht. Also nochmal zur verdeutlichung


    Ich hab in dem geposteten Beispiel drei Absätze mit á 3 Links. Der erste davon sollte immer rot hinterlegt sein, wies bereits ist.
    Die anderen sollten dann rot werden wenn man sie angeklickt hat. Allerdings die drei Absätze voneinander unabhängig. Heißt also wenn ich im ersten garnichts anklicke bleibt der erste rot. Wenn ich danach im zweiten Absatz den link blub 2 anklicke soll dieser rot werden, der erste link im zweiten absatz grau, aber der erste link im ersten Absatz rot bleiben.


    Denke so müsste es vom Verständnis her gehen. Ist halt scheiße zu erklären wenn man nichts mit Fingern zeigen kann :D
     
  4. Dann halt so ;)
     
  5. Alles klar dann danke ich dir vielmals, habs schon umgesetzt und alles funktioniert einwandfrei :)


    Da du so der checker bist, habe ich gleich noch eine weitere Arbeit für dich ;-)

    Ich wollte bei dieser HMTL-Datei eine Top-Ten-Liste einbauen. Kann aber leider im Internet nichts dazu finden wie man dies bewerkstelligt. Ich hab schonmal so was gefunden, also wie man Text auf einer HTML-Seite hinzufügt, bei Self-HTML. Hab mir aber sagen lassen, dass man soetwas nur mit PHP / Perl usw. umsetzen kann.
    BTW: vielleicht weiß einer was ich mein auf Self-HTML würd mich nämlich interessieren was man da rein mit HTML so machen kann.


    -Es sollte folgendermaßen aussehen:

    Die 10 Besten sollte es mit ihrem angegebenen Namen und der Zeit anzeigen. Hat man eine schlechtere Zeit als der 10te sollte einfach die Meldung wie bisher kommen.
    Ist man aber besser, sollte ein Pop-up mit Eintragsmöglichkeit für den Namen erscheinen, welchen es dann mit der dazugehörigen Zeit in die Top-Ten-Liste einträgt.

    -Wie mache ich das??


    Wäre echt super wenn mir da jemand weiterhelfen könnte!
     
  6. Nimm dir einfach nen Free-Webspace der PHP & MySQL anbietet.
    Dort kannste dann das Geraffel ;) in der Datenbank speichern.
    Zur Ausgabe der Top-10 erstellst du ein kleines PHP-Script.

    Das ganze kannste dann per IFrame in deine Arcor-Homepage einbinden :1

    PS:
    Mit reinem HTML und evtl. JavaScript bekommste das eh nicht geregelt ;)

    Das ist kein Problem, aber nach dem nächsten Reload der Seite isses wieder weg ;)
     
  7. Na dann tortzdem vielen dank, aber das wollte ich nicht...
     
Die Seite wird geladen...

Klassenerweiterung eines Java-Script - Ähnliche Themen

Forum Datum
Verzeichnisstruktur verschwindet nach Umbennenen eines Ordners Netzwerk 31. Mai 2016
Umbennen eines Ordners zum Namen "5d" geht nicht Windows 10 Forum 16. Mai 2016
Zu hoher Stromverbrauch eines USB Gerätes Windows 7 Forum 4. Feb. 2016
Ich habe ein error bei der Installation eines programes Windows 7 Forum 28. Jan. 2016
Wiederherstellung eines Festplatteninhaltes mit Betriebssystem Software: Empfehlungen, Gesuche & Problemlösungen 18. Jan. 2016