JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<p>Klicke im folgenden Text auf die Wörter.
Ein Klick macht ein Wort rot, ein zweiter Klick macht es blau, noch
ein Klick nimmt die Farbe wieder weg. Du kannst auch mit der Tabulatortaste
von Wort zu Wort springen und mit der Leertaste die Farbe wechseln.</p>
<p>
Markiere alle <span style="color:red">Nomen rot</span> und alle <span style="color:blue">Verben blau</span>. Drücke dann auf "Prüfen", um zu sehen, ob Du 
es richtig gemacht hast.
</p>
<form id="wordclick" method="POST" action="...">
  <h2>
  <button type="button" name="w001">Toms</button>
  <button type="button" name="w002">Hobby</button>
  <button type="button" name="w003">ist</button>
  <button type="button" name="w004">Schwimmen</button></h2>
  <p>
  <button type="button" name="w005">Jeden</button>
  <button type="button" name="w006">Montag</button>
  <button type="button" name="w007">geht</button>
  <button type="button" name="w008">Tom</button>
  <button type="button" name="w009">zum</button>
  <button type="button" name="w010">Schwimmen</button>.
  </p>
  <p>
  <button type="button" name="w011">Er</button>
  <button type="button" name="w012">braucht</button>
  <button type="button" name="w013">seine</button>
  <button type="button" name="w014">Badesachen</button>:
  <button type="button" name="w015">die</button>
  <button type="button" name="w016">Badehose</button>,
  <button type="button" name="w017">das</button>
  <button type="button" name="w018">Handtuch</button>,
  <button type="button" name="w019">das</button>
  <button type="button" name="w020">Duschbad</button>,
  <button type="button" name="w021">die</button>
  <button type="button" name="w022">Badelatschen</button>
  <button type="button" name="w023">und</button>
  <button type="button" name="w024">die</button>
  <button type="button" name="w025">Schwimmbrille</button>.
  </p>
  <p>
  <button type="button" name="w026">In</button>
  <button type="button" name="w027">der</button>
  <button type="button" name="w028">Schwimmhalle</button>
 ...

CSS

#wordclick {
  font-size: 1.2rem;
  border: 2px solid black;
  border-radius: 0.5em;
  padding: 0 1em 0.5em 1em;
}
button[type=button] {
  font: inherit;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

button[value=rot] {
  background-color: #fcc;
}

button[value=blau] {
  background-color: #ccf;
}

JavaScript

document.forms.wordclick
        .addEventListener("click", function(event) {
   let button = event.target;
   if (!(button instanceof HTMLButtonElement)) return;
   switch (button.value) {
      case "rot" : button.value = "blau"; break;
      case "blau" : button.value = "-"; break;
      default : button.value = "rot"; break;
   }
})