einfacher Button

[Dag]

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>