Webseite mit verschiedenen Buttons programmieren?
Hallo ich würde gerne für ein Schulprojekt ein simples Spiel als Webseite umsetzen. Es soll daraus bestehen, dass es eine Punktzahl gibt und ganz viele verschiedene Auswahlmöglichkeiten bzw. Buttons. Sobald man eine Möglichkeit wählt, geht die Punktzahl entweder nach oben oder nach unten. Hat jemand eine Idee wie / mit welcher Methode sich so etwas realisieren ließe?
1 Antwort
Dieses Vorhaben kann mit HTML und JavaScript realisiert werden.
Ein einfaches Beispiel:
<!doctype html>
<title>Example</title>
<body>
<button data-score="1" type="button">+1</button>
<button data-score="-1" type="button">-1</button>
<p class="score">0</p>
<script>
let score = 0;
const scoreOutput = document.querySelector(".score");
const scoreButtons = document.querySelectorAll("[data-score]");
for (const scoreButton of scoreButtons) {
const add = parseInt(scoreButton.dataset.score);
scoreButton.addEventListener("click", () => {
score += add;
scoreOutput.textContent = score;
});
}
</script>
</body>
Das Skript holt sich alle relevanten Buttons im Dokument und hängt ihnen jeweils einen Event Listener an, der auf Klicks wartet. Wenn ein Buttonklick ausgeübt wurde, wird der Score aktualisiert. Für die Berechnung wird der Wert aus dem data-Attribut verwendet.
Tutorials zu HTML und CSS findest du auf Media Event.