Javascriptanfänger: per onclick hochzählen

amigo89 · 30. Mai 2014

Hallo zusammen,

da ich mich entschieden habe Javascript einmal von 0 an zu lernen und Programmierkenntnisse u.a in C++ und PHP gesammelt habe, habe ich mir ein paar Videos zu Javascript Basics angeschaut.
Habe mir dann überlegt selbst etwas rumzuprobieren und mir eine kleine Funktion geschrieben, die sehr simpel sein soll.
Es soll per Mausklick auf die Website (body) einfach eine Zahl ausgegeben werden und pro Klick diese Zahl erhöht werden.
Allerdings funktioniert es nicht und ich verstehe nicht wieso. Hier der Code:

Code:

<body onclick=testAusgabe();>
    <script>
		var zahl = 2;
		
		function testAusgabe()
		{
			zahl = zahl + 1;
			document.write(zahl);		
		}
	</script>
  </body>

Sehr kurz und nur zum Verständniss für mich geschrieben. Wieso geht das nicht?

Oder generell gefragt: Wenn ich einen Code wie diesen habe, wird doch mit JEDEM neuen Klick die Seite NICHT neu geladen sondern NUR die Funktion und die vorherige Ausgabe wird doch dann quasi überschrieben oder?
So wie es hier auch erscheint, wenn ich in der Console die Variablenwerte abrufe nach jedem Klick, verändert sich auch hier nichts. Dementsprechend scheint es so, dass die Funktion nur beim ersten Klick ausgeführt wird und nicht nocheinmal mit einem weiteren Klick. Wäre schön wenn mir jemand vielleicht 1-2 Worte dazu erklären könnte, wieso sich das ganze so verhält.

Danke !

Mfg,
André

rico2009 · 30. Mai 2014

Die Funktion ansich ist korrekt, dass Problem ist document.write. Dieses sollte man nicht verwenden um Inhalte in der Seite einzufügen, da document.write ein komplett neues Dokument in den DOM schreibt.

Für dein Problem ist ehr innerHTML (SELFHTML: Navigationshilfen / Quickbar) geeignet:

Code:

...
document.getElementsByTagName("body")[0].innerHTML = zahl;
...

Melewo · 30. Mai 2014

amigo89 schrieb:
Oder generell gefragt: Wenn ich einen Code wie diesen habe, wird doch mit JEDEM neuen Klick die Seite NICHT neu geladen sondern NUR die Funktion und die vorherige Ausgabe wird doch dann quasi überschrieben oder?

Der Inhalt der Seite wird neu geschrieben. Dein Problem ist, Du hast keinen Body, der zu sehen wäre, denn dieser füllt ohne Content nicht automatisch das Fenster aus. Nehme Dir doch eine DOM-Methode und schreibe ins Dokument und nicht in den Scriptbereich oder nehme alert, um ins Dialogfenster zu schreiben, dann siehst Du den Unterschied..

Damit probiere einmal beides aus:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Nur eine Testseite</title>
</head>

<body onclick="testAusgabe()">
<div style="width:300px; height:400px; border:1px solid #0f0">
<h1>Was passiert hier?</h1>

<script type="text/javascript">
var zahl = 2;

function testAusgabe()
{
    zahl = zahl + 1;

    //document.write(zahl);
    alert(zahl);
}
</script>

</div>
</body>
</html>

Wenn Du Dir nun den Inspektor vom Firefox nimmst, dann siehst Du, dass als Body-Bereich nur ein Bereich bis in Höhe des DIVs angezeigt wird und darunter wird auch kein Klick mehr erfasst. Und wenn Du dann von alert auf write wechselst, siehst Du ebenfalls was passiert.

Javascriptanfänger: per onclick hochzählen

amigo89

New member

rico2009

Guest

Melewo

New member