Zur Navigation

Javascript bricht nicht ab/Browser lädt ewig weite

1 menthol

Hallo,

um in JS etwas Übung zu bekommen habe ich folgenden Code erstellt. Machen soll der Code folgendes:
Über ein HTML Formular wird ein Wert abgefragt, dieser wird dann an JS an eine Variable übergeben.

Es wird die Function add aufgerufen
Hier soll folgendes passieren:
Der Wert der Variable wird solange um 1 erhöht und mit Zeilenumbrüchen ausgeben, bis er 100 erreicht.
Wenn 100 erreicht wird, soll per alert eine Meldung ausgegeben werden.

Der Code macht auch soweit alles wie gewünscht, allerdings lädt der Browser ewig weiter. Warum ist das so?
Ein andere Phänomen hatte ich, als ich dem else noch eine Bedingung mitgegeben hatte.
Dann wurde die Meldung so oft wiedergeben, wie Ausgaben erstellt wurden.
Bei Startwert 90, zählt das Programm von 90-100, es wird die Meldung 10x ausgeben.

Über eine kleine Hilfestellung wäre ich dankbar, da ich erst seit ein paar Tagen mit JS angefangen habe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>
  
  <form>
<input type="text" name="a" id="inputeins" />
<button type="button" onclick="alertInputValue()">Los!</button>
</form>
  


 
 <script type="text/javascript">
//Function alertInputValue aufrufen
//Eingabe aus Formular in Zahl wandeln
//Eingabe in Variable eingabe schreiben
//Variable a Wert von Variable eingabe zuweisen 
//In Function alertInputValue am Ende Function add aufrufen
 
function alertInputValue()
{
eingabe = parseInt(document.getElementById('inputeins').value);

a=eingabe;

add()
}



// Kleine Funktion um Zeilenumbrueche zu erzeugen
function br (){
 document.write ('<br />'); 
}
 
//Variable a hat Startwert via Inputfeld erhalten
//a + 1 Leerzeile bis a = 100
//Wenn a = 100, alert abbruch 
function add () {
a = a+1;
document.write (a-1);
br()
if (a<100)  
{
add ()
}
else 
{
alert ('abbruch');


}
}


 </script> 

<h1>test</h1>
    
  </body>
</html>

25.07.2013 13:35

2 Jörg Kruse

allerdings lädt der Browser ewig weiter

Das ist bei Firefox der Fall, aber nicht bei Chrome oder Opera. Firebug zeigt auch nicht an, welche Seite geladen wird. Vielleicht ein Browser-Bug, weil Firefox nicht mit dem 100fach rekursiven Funktionsaufruf klar kommt

Normalerweise würde man so eine Aufzählung mit einer Schleife lösen:

while (a < 100) {
    document.write (a-1);
    br();
    a++;
}

Siehe auch dieses Kapitel auf SELFHTML:

http://de.selfhtml.org/javascript/sprache/schleifen.htm

25.07.2013 15:35

3 menthol

Hallo Jörg,

vielen Dank für die schnelle Antwort !
Musste jetzt erstmal rekursiven Funktionsaufruf googeln...
Naja der Funktionsaufruf ist ja nicht in jedem Fall 100fach.
Bei nem Startwert von 90 sollte die Funktio sich ja nur 10x aufrufen.
Das "Problem" im Firefox besteht aber auch dann weiterhin.


Die Lösung mit der Schleife habe ich noch nicht versucht, da ich schlichtweg noch nicht mit while gearbeitet habe. Werde ich aber heute dann mal ausprobieren.

Wirklich verzweifelt hat mich aber die Geschichte mit den Anweisungen die ich else mitgegeben hatte. Da stand mal hinter else ein (a>99)
Bei 15 Funktionsaufrufen wurde entsprechend 15x das alert ausgegeben.
Warum dies so ist, verstehe ich allerdings auch nicht. Zwar ist diese Zusatzbedingung überflüssig wie ich jetzt festgestellt habe, aber sobald 100 erreicht wird, sollten doch die else Anweisungen greifen. Da mehr als 99 aber nur einmal erreicht wird, sollte doch auch nur 1x eine Meldung kommen? Das kann man auch schön sehen, wenn man statt alert ein document.write schreibt. Bei Startwert 0 wird dann halt 100X abbruch in den Browser geschrieben.

Schönen Tag

Alex


Zitat von Jörg
allerdings lädt der Browser ewig weiter

Das ist bei Firefox der Fall, aber nicht bei Chrome oder Opera. Firebug zeigt auch nicht an, welche Seite geladen wird. Vielleicht ein Browser-Bug, weil Firefox nicht mit dem 100fach rekursiven Funktionsaufruf klar kommt

Normalerweise würde man so eine Aufzählung mit einer Schleife lösen:

while (a < 100) {
    document.write (a-1);
    br();
    a++;
}

Siehe auch dieses Kapitel auf SELFHTML:

http://de.selfhtml.org/javascript/sprache/schleifen.htm

25.07.2013 15:57

4 Horst_M

Zitat von menthol
Die Lösung mit der Schleife habe ich noch nicht versucht, da ich schlichtweg noch nicht mit while gearbeitet habe. Werde ich aber heute dann mal ausprobieren.

Nun gut, dann gebe ich Dir mal einen Tipp, den ich leider nicht hatte, als ich begann. Füge in der ersten Scriptzeile "use strict"; ein, falls Du mit dem Firefox und Firebug arbeitest, damit der gleich bei allen Variablen meckert, deren Gültigkeitsbereich nicht richtig definiert wurde. Die anderen Browser kennen wohl keinen strict-Modus.

Auch wenn man es zuweilen anders liest, das schreibt man immer noch so und übergibt dann lieber die Werte an eine Funktion oder definiert nur einige wenige Variablen global.

function alertInputValue()
{
    var eingabe = parseInt(document.getElementById('inputeins').value);
    var a = eingabe;

    add(a);
}

parseInt parst nichts integer, was nicht mit einer Zahl beginnt. Also aus 10px wird 10, aus pixel10 wird jedoch nicht 10. Wenn aber eine Zahl vom Formular übergeben wird, braucht die nicht zusätzlich noch integer geparst zu werden. Für Umwandlung von String in Zahl sollte auch 10*1 genügen, falls unbedingt erforderlich.

Wenn Du document.write aufrufst, nachdem der DOM bereits geladen wurde, wird der Browser möglicherweise versuchen ein neues Dokument aufzurufen oder fehlerhaft reagieren. Probiere es stattdessen mit innerHTML oder createElement.

Edit: Dass der Firefox ab und an nicht ohne zu stoppen abbricht, habe ich ebenfalls festgestellt, doch in Deinem Fall könnte das mit document.write zusammenhängen, was ich aber jetzt nicht getestet habe.

Edit 2: Habe mal etwas gespielt, nun zählt die bis 99 hoch und bricht bei 100 ab. Die einzigen Variablen, die in JavaScript nicht mit var definiert werden, das sind die Variablen, die bereits im Funktionskopf notiert werden. Die restlichen Unterschiede beim Code-Listing erklärte ich zum Teil schon, den Rest kannst Du selbst ergründen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>

<form>
<input type="text" name="a" id="inputeins" />
<button type="button" onclick="alertInputValue()">Los!</button>
</form>

<script type="text/javascript">
"use strict";

function alertInputValue()
{
    var eingabe = parseInt(document.getElementById("inputeins").value);
    add(eingabe);
}

function add(a) {

    a = a +1;
    document.getElementById("gebeaus").innerHTML += (a-1) +"<br />";

    if (a < 100)
    {
        add(a);
    }
    else
    {
        alert (a +"abbruch");
    }
}

</script>
<h1>test</h1>

<div id="gebeaus">Hier ...<div>
</body>
</html>

Je nachdem, ob Du da ein += oder nur ein = bei innerHTML += (a-1) notierst, werden entweder alle oder nur die höchste Zahl ausgegeben.

28.07.2013 18:47 | geändert: 28.07.2013 19:30

1 Forenmitglied fand diesen Beitrag gut

5 menthol

Morgen Horst,

vielen Dank für die sehr ausführliche Hilfestellung. Das meiste werde ich erst einmal verdauen und Schritt für Schritt nachvollziehen müssen.

Auf alle Fälle werde ich mich die nächsten Tage noch einmal mit einem kleinen Feedback melden.

Gruß

Alex

29.07.2013 06:49

6 Horst_M

Nun ja, ich habe ja auch mal angefangen und bin mit document.write Irrwege gegangen. document.write ist das Mittel der Wahl, um etwas in einem JavaScript-Bereich auszugeben, was bereits beim Laden der Seite vorhanden ist und sei es nur als Referenz auf ein anderes Objekt oder auf ein anderes Dokument, wie bei

document.write("<img src=\"http://"+ ... >");

Du möchtest aber nicht bis zu 100mal ein neues Dokument laden, Du möchtest ja nur bis zu 100mal etwas in den DOM schreiben. (den/das DOM, eigentlich das Document Object Model, schreibe den, weil ich den Dokumentenbaum meine)

Also, document.write ist gut, wenn ein Dokument neu geschrieben und neu geladen wird. innerHTML oder die create-Methoden sind gut, wenn etwas in ein bestehendes (fertig geladenes) Dokument eingefügt oder verändert werden soll (DOM-Manipulation).

Der Strict-Modus wird hier erklärt: developer.mozilla.org/... /Strict_mode

Ist aber schon eine Zeit her, als ich mir mal den Text übersetzte. Doch zu Anfang eines Scripts einfügen, mindestens für einen abschließenden Test, hilft Fehler vermeiden.

29.07.2013 10:30

7 Horst_M

Wie ich gerade bei der Durchsicht von älteren Posts in dieser Rubrik feststellte, so hatte Jörg mal etwas zu parseInt() geschrieben, was völlig richtig ist, da der + Operator sonst ein fehlerhaftes Ergebnis verursachen würde:

https://joergs-forum.de/in-javascript-addieren-statt-zusammenfuegen-t-2109-1

Da aber JavaScript nicht besonders schwerfällig auf Typumwandlungen reagiert, würde es diese Schreibweise mit *1 ebenfalls tun:

eingabe*1

Du kannst es jedoch so belassen wie gehabt, da parseInt() gleichzeitig noch ungültige Eingaben filtert.

var wert = parseInt("12px");
alert(typeof(wert) + " = " + wert);       

// Ausgabe: number = 12

29.07.2013 11:49 | geändert: 29.07.2013 11:57

8 menthol

Hallo Horst,

die parseInt Geschichte habe ich von Jörg, genau dieses von Dir verlinkte Post. Hatte auch diesen wahrscheinlich typischen Anfängerfehler, dass die Variablen einfach nur Verknüpft wurden.

Habe jetzt das mit eingabe*1 für Konvertierung in eine Zahl mal versucht.
Mit: eingabe=eingabe*1 hat es dann wunderbar geklappt. Schonmal sehr hilfreich wenn man mehrer Methoden kennt.

Der Sache mit dem DOM komme ich nun auch schon etwas näher, werde mich mit DOM heute mal etwas mehr beschäftigen. Mit den x-mal generierten Seiten war mir auch nicht mit document.write bewusst. Eine Manipulation einer bestehenden Seite scheint da wirklich elegenater zu sein.

Mit dem strict Mode ist ein super Hinweis! PHP ist da ja was Fehler anbelangt sehr deutlich, bei JS vermisse ich das ja fast.

Noch kurz zu dem von mir geschriebenen Code:
Es ist eben nur eine reine Fingerübung um überhaupt mal mit JS vertraut zu werden. JS wollte ich eigentlich nie lernen, ich hielt es bis vor einigen Tagen FÜR MICH für überflüssig. Vor ein paar Tagen hatte ich dann eine kleine Site mit einer Google Maps Anwendung entdeckt, und mir Codebeispiele der Maps API angesehen. In nur kurzer Zeit konnte ich damit dann schon einige Spielerein auch ohne Grundkenntnisse in JS anstellen.
Aber natürlich war ich dann schnell an einem Punkt, an dem es nicht mehr weiter ging. Jetzt fange ich halt parallel dazu mit einem Online-Kurs zu JS an.

Auch nochmal vielen Dank an dieser Stelle für die tolle Unterstützung hier.
Was das Forum hier angeht: Endlich mal eine nicht überlade und schlichte Oberfläche. Mag zwar für manche verstaubt wirken, aber ich finde es klasse.

Alex









29.07.2013 18:25

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]