> 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 ~~~js <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> ~~~

> 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> ~~~