taralino

Button-Interaktionen

Als erste Interaktionsmöglichkeit dienen einfache Buttons (Schaltflächen). Um diese verwenden zu können, führen wir folgendes Konzept ein:

Die Funktion on_click

Falls eine Funktion mit dem Namen on_click definiert ist, dann wird diese genau dann aufgerufen, wenn ein (zuvor definierter) Button gedrückt wird.

Um prüfen zu können, welcher Button gedrückt wurde, wird der Funktion on_click als Argument die Id des Buttons übergeben.

Zur Referenz

Entsprechend folgt nun der Befehl, um Buttons zu definieren:

Button.add(id, caption)

Der Befehl dient dazu, einen neuen bzw. weiteren Button zu definieren. Dazu erhält der Button die Id id und caption definiert die Beschriftung der Schaltfläche.

Zur Referenz

Beispiel

Es werden drei Schaltflächen definiert, um einen entsprechend farbigen Kreis zu zeichnen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,10], [0,6], {width:400, background:"lightgrey"});
Canvas.text(5, 3, "Klicke auf die Buttons");

Button.add("red", "Rot");
Button.add("green", "Gruen");
Button.add("blue", "Blau");

function on_click(id) {
  Canvas.clear();
  if (id == "red") Canvas.circle(5, 3, 2, {fill:"red"});
  if (id == "green") Canvas.circle(5, 3, 2, {fill:"green"});
  if (id == "blue") Canvas.circle(5, 3, 2, {fill:"blue"});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern