Rechnung mit Javascript?
Vorweg: Ich bin noch ziemlich unerfahren, was JS betrifft
Ich habe einen Button auf einer HTML Seite. Ich würde es gerne so machen, dass, wenn man auf den Button drückt, einer Variable immer um eins steigt (Halt, dass der Variable 1 dazu gerechnet wird)
Beispiel: Button einmal gedrückt, Variable = 000.001
Button nochmal gedrückt, Variable = 000.002
Button 23 mal gedrückt, Variable = 000.023 usw..
Diese Variable soll dann auch auf dem Bildschirm angezeigt werden. Kann mir wer helfen?
Das ist momentan mein Code:
Danke im Voraus
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rechnung</title>
</head>
<body>
<button onclick="addition()">Drücke hier</button>
<div id="Ergebnis">000.000</div>
</body>
<script>
let Ergebnis
function addition (){
Ergebnis += 1;
}
</script>
</html>
2 Antworten
Eine mögliche Lösung:
<!doctype html>
<head>
<title>Example</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="updateStatus()">Click me</button>
<div id="status">000.000</div>
<script>
const outputElement = document.getElementById("status");
let counter = 0;
function updateStatus() {
++counter;
let result = counter.toString().padStart(6, '0');
result = result.slice(0, 3) + "." + result.slice(3);
outputElement.textContent = result;
}
</script>
</body>
Beachte bezogen auf dein HTML, dass das script-Element entweder in den head oder in den body gehört. Außerhalb dieser beiden Bereiche hat kein Element (mit Ausnahme des html-Elements natürlich) etwas zu suchen.
Um den Inhalt des div-Elements zu ändern, benötigst du einmal eine Referenz auf den Knoten im DOM (diese erhältst du hier via getElementById). Die tatsächliche Aktualisierung findet statt, indem das textContent-Property geändert wird.
Für das Ausgabeformat habe ich etwas mit Strings gespielt. Die aktuelle Zahl wird erst in eine Zeichenkette konvertiert und dann mit Nullen soweit aufgefüllt, bis sie insgesamt aus sechs Zeichen besteht. Danach wird sie in zwei Teile zerlegt. Diese wiederum werden mit einem Punkt dazwischen wieder zusammengefügt.
<button onclick="myFunction(1)">Drücke hier</button>
<script>
var ergebnis = 0;
function myFunction(counter) {
event.preventDefault();
ergebnis = ergebnis + counter;
document.getElementById("anzeige").innerHTML = ergebnis;
}
</script>
<p id="anzeige"></p>