Hintergrundfarbe von button-Element bei Klick ändern [war: Neuling braucht Hilfe!]

[carpa]

Hi
Kann mir wer bitte schnell helfen
Wie bekomme ich es hin wenn ich einen Button(grau normal)habe, dass er dann beim Anklicken auf grün wechselt?

grün <button>this is my button</button>

danke schonmal

[Roin]

Guten Tag carpa,
bitte gebe deinen nächsten Threads sinnvollere Titel. Mit diesem kann niemand was anfangen.

Zu deiner Frage:
Dies kannst du mit JavaScript lösen.

Ein Button ist ein Element, welches speziell für JavaScript-Aktionen gedacht ist.

<button id="dieserbutton" onclick="document.getElementById('dieserbutton').style.backgroundColor = '#00CC00';">Werde Grün</button>

Dies ist ein Beispiel, wie es funktionieren könnte.
Verwende beim nächsten mal bei so "einfachen" Fragen bitte die Suchfunktion des Boards oder vorher besser noch Google. Dort findest du mit den richtigen Suchbegriffen unter den ersten 5 Ergebnissen immer schöne Anleitungen.

LG

[carpa]

Besten Dank für die schnelle Hilfe
Nur wie schaffe ich es, dass diese Farbe bei erneutem Klick wieder neutral wird bzw auch auf der Seite aktuell gespeichert bleibt?
Da bei erneutem aktualisieren der Button wieder grau ist und ich hätte gerne, dass er sich die Einstellungen merkt.

Nochmals Danke für die wirklich schnelle und tolle Hilfe

[Roin]

Damit der sich die Einstellung "merkt" benötigst du eine serverseitige Sprache zum Speichern in einer Datenbank (zum Beipiel PHP in Verbindung mit MySQL) oder du musst Cookies verwenden.

Dabei würde sich anbieten über den Button eine Funktion aufzurufen (onclick="functionsname();")

Ich werde dir nun nicht den kompletten Quelltext hier schreiben, da genügend Beispiele mit Google zu diesem Thema zu finden sind.

Stichwörter:

• JavaScript
• Cookie
• CSS
• Farbe ändern

[Dexter]

Ein Button ist ein Element, welches speziell für JavaScript-Aktionen gedacht ist.

[Roin]

Bei normalen buttons ist das so gedacht. Für die formular bearbeitung stehen die input tags zur verfügung. Oder habe ich da irgendetwas verpasst?

[carpa]

So nun habe ich gegoogled und verstehe trotzdem nur bahnhof da die meisten seiten ja eh auf englisch sind und das nicht gerade meine stärke ist.vielleicht erbarmt sich ja hier einer und kann mir da weiterhelfen wie das mit dem speichern geht

[LemonDrops]

Don't mess with Stuff, you don't understand.

[carpa]

Don't mess with Stuff, you don't understand.

[Kugelfisch23]

Bei normalen buttons ist das so gedacht. Für die formular bearbeitung stehen die input tags zur verfügung. Oder habe ich da irgendetwas verpasst?

Ja, denn einerseits lassen sich sowohl button-Elemente als normale Formularelemente mit einer zugeordneten Standard-Funktion nutzen, andererseits können generische Buttons ohne inhärente Funktion auch durch input-Elemente erzeugt werden. Die Funktion in beiden Fällen wird durch das type-Attribut festgelegt: ein button- oder input-Element mit type-Attribut button generiert einen generischen Push-Button, während Elemente mit type-Attribut submit oder reset inhärent bestimmte Aktionen auslösen (das Abschicken bzw. Zurücksetzen des Formulars) - siehe http://www.w3.org/TR/html401/interac...-control-types.

Der Unterschied besteht einzig darin, dass button-Elemente beliebige (vom value-Attribut unabhängige) Inhalte aufweisen dürfen und somit der angezeigte Text vom formularintern verwendeten Inhalt des value-Attributs abweichen kann, während bei input-Elementen lediglich das value-Attribut zur Verfügung steht. Siehe auch http://www.w3.org/TR/html401/interact/forms.html#h-17.5.

vielleicht erbarmt sich ja hier einer und kann mir da weiterhelfen wie das mit dem speichern geht

Wie genau möchtest du den Wert speichern? Wenn die Speicherung serverseitig erfolgen soll (z.B. da du den Wert benutzerspezifisch speichern oder weiterverarbeiten möchtest), würde sich ein normales Formular anbieten, welches durch einen Klick auf den Button abgeschickt wird. Diese Lösung hat zudem den Vorteil, dass sie JavaScript-unabhängig funktioniert. Andernfalls könntest du dazu JavaScript nutzen und den aktuellen Wert z.B. in einem Cookie oder im Local Storage (sofern verfügbar) speichern.

[Roin]

@Kugelfisch:
Das war mir bisher alles bekannt, ich habe meine Formulierung nur wohl etwas großzügig gefasst. Dann achte ich wohl demnächst mehr auf meine genaue Ausdrucksweise

[carpa]

Hi

Also dienen soll es für folgendes:

Ich muss ne Hp für unseren Verein erstellen wo sich Spieler für Spieltage anmelden können

Soll ganz einfach sein
Jeder User findet seinen Namen mit jeweils den Auswahlmöglichkeiten als Buttons(Ja oder Nein)
und diese Auswahl (ja button wird grün) (nein Button wird rot) soll gespeichert bleiben, damit ein anderer Spieler auch sieht welche Auswahl Spieler 1 gewählt hat
Hoffe es ist soweit verständlich

gruss carpa

[KingJamez]

Dazu brauchst du eine Serverseitige Sprache, PHP zum Beispiel.
Bei einem klick auf "teilnehmen" wird in einer Datenbank für den User ein Wert gesetzt, diesen Wert liest du bei jedem öffnen aus. (sehr einfach erklärt)

// wenn der user "teilnhemen geklickt hat"
// $wert ist der wert aus der Datenbank
if($wert == 1){
   echo '<a href="#" style="background: green">Nimmt teil</a>';
}
else{
   echo '<a href="#">Teilnehmen</a>';
}

das ist ein beispiel wie du die abfrage lösen kannst. Allerdings solltest du dir wirklich überlegen ob du das ansicht lösen willst oder nicht doch lieber auf ein CMS zurückgreifen willst. Wenns bei dir schon mit englisch problematisch ist wirst du erst recht Probleme haben PHP und JS zu nutzen

[carpa]

Hi
Leider kann (geht )kein php ist das sonst wie möglich
eventuell nur mit einem cookie?
Zur besseren Verständnis

http://fussballrunde.jimdo.com/anmeldug/

gruss

[Roin]

// Cookies lesen, schreiben und löschen.
function liesCookie(name)
{
   var keks = document.cookie;

   // Anfangsposition des Name=Wert-Paars suchen
   var posName = keks.indexOf("; " + name + "=");
   if (posName == -1) {
      // vielleicht war's der erste Name in der Liste?
      if (keks.indexOf(name + "=") == 0) posName = 0;
      // nein? dann abbrechen mit Rückgabewert null
      else return null;
   }

   // Anfangs- und Endposition des Krümelwerts suchen
   var wertAnfang = keks.indexOf("=", posName)+1;
   var wertEnde = keks.indexOf(";", posName+1);
   if (wertEnde == -1) wertEnde = keks.length;

   // Krümelwert auslesen und zurückgeben
   var wert = keks.substring(wertAnfang, wertEnde);
   return unescape(wert);
}


function fixedGMTString(datum)
{
// Diese Funktion korrigiert den Datums-Bug von
// Netscape/Mac und liefert den korrekten GMTString:
   var damals=new Date(1970,0,1,12);
   if (damals.toGMTString().indexOf("02")>0) {
      datum.setTime(datum.getTime()-1000*60*60*24);
   }
   return datum.toGMTString();
}

function schreibCookie(name,wert,verfall/*,pfad,dom,secure*/)
{
   neuerKeks = name + "=" + escape(wert);
   if (verfall)
   {
      neuerKeks += "; expires=" + fixedGMTString(verfall);
   }
   neuerKeks += "; path=/";
   /*if (pfad) neuerKeks += "; path=" + path;
   if (dom) neuerKeks += "; domain=" + dom;
   if (secure) neuerKeks += "; secure";*/
   document.cookie = neuerKeks;
} 

Diesen Code habe ich hier irgendwo mal im Forum gefunden - ist an dieser Stelle wohl angebracht.
Wie du das jetzt verwendest bleibt dir überlassen. Diese beiden Funktionen vereinfachen Cookies setzten und verwenden mit JS aber auf jedenfall (finde ich).

[Kugelfisch23]

eventuell nur mit einem cookie?

Prinzipiell könntest du in einem Cookie den Status des Buttons für einen Benutzer (bzw. einen Browser) speichern. Bedenke jedoch, dass andere Benutzer die vorgenommenen Veränderungen nicht einsehen könnten, da diese dann lediglich lokal gespeichert würden - damit wäre die Seite zur Terminkoordination ungeeignet. Wenn du keine Möglichkeit hast, die Einträge der Benutzer serverseitig zu speichern und anderen Benutzern zugänglich zu machen, wirst du einen externen Dienst wie z.B. http://www.doodle.com/ nutzen müssen.