HTML Element Click - Counter / Zähler?
Hey, also ich wollte fragen ob jemand weiß, wie ich einen HTML Element Script so schreibe, dass man einen ,,counter hat'' (Ich hab keine ahnung von programmieren, aber bräuchte das).
Wenn man sozusagen auf den + Button drückt, zählt es eine zahl hoch. Auf dem - Butoon zählt es dann runter. Ist das irgendwie möglich?
1 Antwort
Hier ein Beispiel. Einfach den Code in einer html-Datei speichern.
<html>
<head>
<script>
var count = 0;
function increment() {
count++;
document.getElementById("count").innerHTML = count;
}
function decrement() {
count--;
document.getElementById("count").innerHTML = count;
}
</script>
</head>
<body>
<button onclick="increment()">+</button>
<span id="count">0</span>
<button onclick="decrement()">-</button>
</body>
</html>
Innerhalb des script-Elements werden JavaScript Funktionen genutzt.
Aufgerufen wird die jeweilige Funktion durch onclick im button-Element.
Klar. Du kannst innerhalb des head-Elements noch eine sytle-Element mit CSS hinzufügen.
Hier ein Beispiel:
<style>
body, button {
font-size: 60px;
}
</style>
In dem Beispiel erhöhst du die Schrift von allen Elementen im body-Element und allen Buttons.
Hinweis: Das style Element muss außerhalb des script-Elements eingefügt werden, aber innerhalb von head.
Noch zwei Korrekturen zum obigen Code, denn der ist in diesem Zustand invalid.
In die allererste Zeile gehört ein Doctype.
<!doctype html>
Innerhalb des head-Elements fehlt ein title-Element, welches den (nichtleeren) Seitentitel enthält.
<title>Some document title</title>
Zudem wäre es passender, den Text mit dem textContent-Property zu setzen, statt innerHTML. Immerhin wird nur ein Textknoten geändert.
Wäre noch erwähnenswert, dass du JavaScript verwendest, wenn die Person keine Ahnung davon hat. Ansonsten passt die Antwort sehr gut.
Dankeschön, klappt :) Kann man die Buttons & Schrift auch größer machen, wenn ich sie z.B. in eine Website einbauen will?