einfacher Button

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

Das entsprechende UI-Element für zwei Zustände (aus/an, frei/belegt etc.) ist eine Checkbox:

Wenn Du nur 2 Zustände hast, mag das gehen. Letztendlich haben wir jedoch eine programmiertechnische Aufgabe und die würde ich nicht vom Vorhandensein von HTML-Elementen abhängig machen (Trennung von Semantik und Geschäftslogik). Zum Abstahieren weiterer Zustände habe ich meinen Ansatz mal erweitert. Wobei das Element was geklickt werden soll, nicht unbedingt ein <button> sein muss. Es sind beliebig viele Zustände möglich, die bei jedem Klick in einer vorgegebenen Reihenfolge eingestellt werden (round robin). Die Aufgabe für 2 Zustände ist somit nur ein Spezialfall.

Schönen Sonntag

<button onClick="ff()" id="button" style="padding:0.5em; width:2in; font-weight:bold">...</button>

<script>
function ff(nr){
    // declarations
    if(this.state == null){
        this.state = [];
        this.state[0] = { bgcolor: 'red',    text: 'Occupied',    color: 'white' };
        this.state[1] = { bgcolor: 'yellow', text: 'DAMAGED',     color: 'black' };
        this.state[2] = { bgcolor: 'green',  text: 'Free',        color: 'white' };
        this.state[3] = { bgcolor: 'blue',   text: 'nobody knows', color: 'gold' };
        this.state[4] = { bgcolor: 'white',   text: 'Closed',     color: 'navy' };
        console.log('initialize, done...');
    }

    // initialize
    if( this.stnr == null ){
        this.stnr = nr != null ? nr : 0;
        return apply( this.state[this.stnr]  );
    }

    // on each click
    this.stnr++;
    if( this.stnr > this.state.length - 1 ) this.stnr = 0;
    return apply( this.state[this.stnr]  );
}

function apply(state){
    document.getElementById('button').innerHTML             = state.text;
    document.getElementById('button').style.backgroundColor = state.bgcolor;
    document.getElementById('button').style.color           = state.color;
}

window.onload = function(){
    ff(3);
};

</script>

wir haben in diesem Thread ja schon viel gelernt über Eventlistener und capturing und bubbeling und über Fallback usw. Nun wäre es doch konsequent, wenn Du dein Beispil nochmal so umbauen würdest, dass diese Dinge alle berücksichigt werden, z.B. mal für eine ganze Sitzreihe.

Und dann bleibt bei mir noch eine Frage übrig: könnte man für die Schaltelemente auch Bildet nehmen, hier eben von Stühlen?

Ich kann leider noch nicht wiedef mitspielen. Auf dem Tablet geht das nicht so gut. Abet es kribbelt schon wieder ;-)

Spirituelle Grüße
Euer Robert
[e-mail]