Probleme mit einem Code und weiß den Fehler nicht

Sandy · 06. Juni 2014

Das ist die Aufgabe:
Überlegen Sie sich eine Abfrage in JavaScript um die richtige Länge einer Postleitzahl zu überprüfen. Angenommen Sie haben Besucher aus ganz Europa, dann liegt die mögliche Länge der Postleitzahl zwischen minimal 3 Zeichen und maximal 5 Zeichen. Erstellen Sie ein einfaches Formular mit einem Eingabefeld für die PLZ. Überprüfen Sie die Länge der eingegebenen PLZ und verfahren. Weiß jemand was hier falsch ist??

Code:

<script language="JavaScript">
function leer()
    {
if  (document.form3.Postleitzahl.value.length >3 )
    {
    alert('Bitte geben Sie eine Postleitzahl an!');
    document.form3.Postleitzahl.focus();
    }
else
   { document.form3.Postleitzahl.submit(); }:confused:

   {
if ( document.form3.Postleitzahl.value.length <6 )
    {
    alert('Bitte geben Sie eine Postleitzahl an!');
    document.form3.Postleitzahl.focus();
    }
else
   { document.form3.Postleitzahl.submit.Return(); }
    /*
    diese Zeile wird nur abgearbeitet, wenn
    beide if-Bedingungen nicht zutreffen
    */
}
}
</script>
<body>
<form name="form3">
Postleitzahl: <input type="text" name="Postleitzahl" size="20"/>
<input type="button" value="Senden" onclick="leer()"/>
</form>

kleimscheim · 06. Juni 2014

Sind das deine Hausaufgaben? Warum verwendest du nicht die Code Funktion um Code zu posten? Und welchen Fehler meinst du eigentlich?

Logisch machen die if-Bedingungen keinen Sinn. Du fragst z.B. am Anfang ob der Wert größer als 3 ist und gibst falls zutreffend eine Meldung aus. Das heißt ein Benutzer kann jetzt eine richtige Postleitzahl angeben und bekommt von dir eine Fehlermeldung an den Latz geknallt

Code:

if (document.form3.Postleitzahl.value.length > 3)
{
	alert('Bitte geben Sie eine Postleitzahl an!');
	document.form3.Postleitzahl.focus();
}

Das war nur der erste logische Fehler. Prüfe deine if-Bedingungen und auch deinen if-Aufbau.

kkapsner · 06. Juni 2014

Wo hast du denn die .Return()-Methode her? Die gibt es nicht.
Und ein <input> hat auch keine .submit()-Methode - die hat nur ein <form>...

Aber das diese beiden Methoden ncht existieren, steht auch in der Fehlerkonsole.

PS: Das language-Attribut ist veraltet -> weg damit.

Sandy · 11. Juni 2014

Hallo und danke für die Antworten,
ja, richtig. Das sind meine Hausaufgaben. Das es die Return-Methode nicht gibt, ist mir auch klar geworden. Ich würde mich trotzdem noch über ein paar Antworten freuen.

- - - Aktualisiert - - -

Hallo Kleimscheim,
Was meinst Du damit "warum verwendest du nicht die Code Funktion um Code zu posten"? Eh, sorry Du, aber ich bin noch ziemlich neu hier und kenn mich noch nicht so gut aus.

Ich meine der Fehler liegt hier irgendwo.
document.form3.focus();
}
else
{ document.form3.submit();

mikdoe · 12. Juni 2014

Sandy schrieb:
Ich würde mich trotzdem noch über ein paar Antworten freuen.

Was genau möchtest du noch wissen?

Sandy schrieb:
Was meinst Du damit "warum verwendest du nicht die Code Funktion um Code zu posten"?

Wenn du Code postest schließe diesen bitte in Markierungen ein. Dafür gibt es im Editor in der zweiten Zeile ganz rechts drei Schalter. Lattenzaun ist jeglicher Code. Eckige Klammern sind HTML und das Blatt ist PHP Code.

Sandy schrieb:
Ich meine der Fehler liegt hier irgendwo.

Welchen Fehler genau hast du noch?
Das Ganze wird erheblich einfacher, wenn du konkrete Fragen stellst oder Fehlermeldungen zeigst.

j-l-n · 12. Juni 2014

Wo liegt denn noch der Fehler? Steht etwas in der Fehlerkonsole?

Du solltest dir eine vernünftige Codeeinrückung angewöhnen; das macht das Ganze besser lesbar und du würdest Fehler wie den, dass du eine Klammer vergessen hast, vermeiden!

Die Funktion lässt sich sehr vereinfachen:

Code:

function validatePLZ(){
  var element = document.form3.Postleitzahl;
  var len = element.value.length;
  var numeric = isNumeric(element.value);
  if (len >= 3 && len <= 5 && numeric === true) {
    document.form3.submit();
  }
  else {
    alert("Dies ist keine valide Postleitzahl!');
    element.focus();
  }
}

function isNumeric(string) {
  return !isNaN(parseFloat(string)) && isFinite(string);
}

Wie du siehst habe ich noch eine viel wichtigere Prüfung eingebaut, nämlich ob die Postleitzahl auf nur aus Zahlen besteht.

PS: das language="JavaScript"-Attribut ist veraltet, lass es also weg!

Sandy · 12. Juni 2014

Hi Julian,
danke, dass Du Dir soviel Arbeit gemacht hast. Ich bin wirklich blutige Anfängerin! Wegen Deinem Script verstehe ich nur Bahnhof und würde ich gerne verstehen. Wenn man die 5-stellige Postleitzahl eingibt, dann soll das Formular versendet werden und die richtige Meldung soll angezeigt werden. Wenn aber nur eine Postleitzahl mit 2 Ziffern eingegeben wird, dann soll nicht versendet werden. Was bedeutet "focus" und "len".
Ich habe Windows 8! Kann mir jemand einen leicht zubienenden Editor für Javascript empfehlen?

- - - Aktualisiert - - -

Hallo nochmal,
wo kann man hier Freunde finden? Kann mir hier keiner mal richtig Javascript erklären?? Bin richtig verzweifelt mit dieser Aufgabe. Bitte, bitte, bitte!

mikdoe · 12. Juni 2014

Sandy schrieb:
Kann mir jemand einen leicht zubienenden Editor für Javascript empfehlen?

Notepad++ Home
Der Editor selbst ist deutschsprachig, nur die HP ist engl.

j-l-n · 12. Juni 2014

Sandy schrieb:
Wenn man die 5-stellige Postleitzahl eingibt, dann soll das Formular versendet werden und die richtige Meldung soll angezeigt werden.Wenn aber nur eine Postleitzahl mit 2 Ziffern eingegeben wird, dann soll nicht versendet werden.

Genau das tut das Skript.

Sandy schrieb:
Was bedeutet "focus" und "len".

focus() legt automatisch den Fokus auf das Textfeld, sodass man direkt lostippen kann und dieses nicht erst anklicken muss. "len" ist eine von mir definierte Variable, und zwar die Länge der eingegebenen Zahl. Javascript Variablen | mediaevent.de

Sandy schrieb:
Ich habe Windows 8! Kann mir jemand einen leicht zubienenden Editor für Javascript empfehlen?

Schließe mich mikdoes Rat an.

- - - Aktualisiert - - -

Skript nochmal mit ein paar Anmerkungen, vielleicht wird es dann klarer:

Code:

function validatePLZ(){
  var element = document.form3.Postleitzahl; //mit "element" kann nun auf das Textfeld zugegriffen werden
  var len = element.value.length; //liest die Länge der Eingabe im Textfeld aus
  var numeric = isNumeric(element.value); //prüft mit unten definierter Funktion, ob es sich bei due Eingabe nur aus Zahlen besteht
  if (len >= 3 && len <= 5 && numeric === true) { //nur wenn die Eingabe ausschließlich aus Zählen besteht und zwischen 3 und 5 Zeichen lang ist:
    document.form3.submit(); //Formular abschicken
  }
  else { //wenn nicht:
    alert("Dies ist keine valide Postleitzahl!'); //Fehlermeldung
    element.focus(); //automatisch Fokus setzen, damit man die Eingabe direkt ausbessern kann
  }
}

function isNumeric(string) {
  return !isNaN(parseFloat(string)) && isFinite(string);
}

Sandy · 12. Juni 2014

Hi nochmal,
ich habe Notepad ++. Ist das das Gleiche wie Notepad ++ Home?? Oder ist da ein Unterschied? Wenn ich noch ein anderes Problem hab, dann muss ich einen neuen Beitrag öffnen, ne?

- - - Aktualisiert - - -

Mein Chef wird mir nicht glauben, dass ich das gemacht habe. Hmmm, danke für die gute Erklärung. Du weißt wirklich keinen, der mir in natura die Programmiersprache erklären kann?

- - - Aktualisiert - - -

Hi, der macht aber trotzdem noch Fehlermeldung und zwar mit diesem Befehl: <input type="button" value="Senden" onclick="leer()"/>. Ich glaube, die bezieht sich doch auf die Funktion, oder?

j-l-n · 12. Juni 2014

Sandy schrieb:
Hi nochmal,
ich habe Notepad ++. Ist das das Gleiche wie Notepad ++ Home?? Oder ist da ein Unterschied?

Ne, da ist keiner soweit ich weiß.

Sandy schrieb:
Du weißt wirklich keinen, der mir in natura die Programmiersprache erklären kann?

Am schnellsten lernt man wirklich nur durch Probieren. Außerdem kann ich dir Learn to code | Codecademy empfehlen.
Und du solltest dich mit den wichtigsten Grundlagen vertraut machen:

Du kannst bei allem jederzeit hier im Forum fragen, wir helfen dir gerne weiter!

Sandy schrieb:
der macht aber trotzdem noch Fehlermeldung und zwar mit diesem Befehl: <input type="button" value="Senden" onclick="leer()"/>. Ich glaube, die bezieht sich doch auf die Funktion, oder?

Die Funktion ist ja function validatePLZ(){. D.h., du musst sie also mit korrektem Namen aufrufen: <input type="button" value="Senden" onclick="return validatePLZ()"/>

Hatte noch vergessen, das return false einzubauen, damit der Browser das Formular nicht trotzdem absendet. Aktualisierte Version:

Code:

function validatePLZ(){
  var element = document.form3.Postleitzahl; //mit "element" kann nun auf das Textfeld zugegriffen werden
  var len = element.value.length; //liest die Länge der Eingabe im Textfeld aus
  var numeric = isNumeric(element.value); //prüft mit unten definierter Funktion, ob es sich bei due Eingabe nur aus Zahlen besteht
  if (len >= 3 && len <= 5 && numeric === true) { //nur wenn die Eingabe ausschließlich aus Zählen besteht und zwischen 3 und 5 Zeichen lang ist:
    document.form3.submit(); //Formular abschicken
  }
  else { //wenn nicht:
    alert("Dies ist keine valide Postleitzahl!'); //Fehlermeldung
    element.focus(); //automatisch Fokus setzen, damit man die Eingabe direkt ausbessern kann
   return false; //verhindern, dass Formular abgesendet wird
  }
}

function isNumeric(string) {
  return !isNaN(parseFloat(string)) && isFinite(string);
}

kkapsner · 15. Juni 2014

Ein paar Kleinigkeiten:

Das return im onclick und in der funktion sind unnötig, da das ja ein <input type="button"> und nicht <input type="submit"> ist.
Aber genau da gehört die Validierung eigentlich nicht hin, sondern in das onsubmit des <form>s, da man ja ein Formular auch über die Entertaste abschicken kann. Dann müssen die returns natürlich wieder rein, ABER dafür muss dann das .submit() raus, da das Formular ja sowieso versendet wird.

In dieser Prübung würde "1abdf" als valide PLZ erkannt werden, was sie natürlich nicht ist:

Code:

function validatePLZ(){
	var element = document.form3.Postleitzahl; //mit "element" kann nun auf das Textfeld zugegriffen werden
	if (!element.value.match(/^\d{3,5}$/)){
		alert("Dies ist keine valide Postleitzahl!'); //Fehlermeldung
		element.focus(); //automatisch Fokus setzen, damit man die Eingabe direkt ausbessern kann
		return false; //verhindern, dass Formular abgesendet wird
	}
}

@Sandy: als Erklärung solltest du dir das Kapitel zu RegExp mal durchlesen.

Ich würde das ja über das pattern-Attribut des <input> lösen: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-pattern
Dann kannst du dir bei modernen Browsern das JS komplett sparen und wenn du ältere unterstützen willst/musst kannst du einen Shim dafür verwenden.

j-l-n · 15. Juni 2014

kkapsner schrieb:
Das return im onclick und in der funktion sind unnötig, da das ja ein <input type="button"> und nicht <input type="submit"> ist.

Stimmt, hab ich übersehen - dachte, es wäre letzteres...

kkapsner schrieb:
In dieser Prübung würde "1abdf" als valide PLZ erkannt werden, was sie natürlich nicht ist:

Wieso? Es wird doch false zurückgegeben:

Code:

function isNumeric(string) {
  return !isNaN(parseFloat(string)) && isFinite(string);
}
alert(isNumeric("1abdf")); //false

kkapsner · 16. Juni 2014

Da hast du jetzt wieder Recht. isFinite verhält sich da anders, als ich es im Kopf hatte. Trotzdem ist die Prüfung nicht gut, da z.B. "1.1" als valide PLZ erkannt werden würde.

j-l-n · 16. Juni 2014

kkapsner schrieb:
Trotzdem ist die Prüfung nicht gut, da z.B. "1.1" als valide PLZ erkannt werden würde.

...womit wiederum du Recht hast

das hatte ich nicht bedacht.

Probleme mit einem Code und weiß den Fehler nicht

Sandy

New member

kleimscheim

New member

kkapsner

Super Moderator

Sandy

New member

mikdoe

Moderator

j-l-n

Guest

Sandy

New member

mikdoe

Moderator

j-l-n

Guest

Sandy

New member

j-l-n

Guest

kkapsner

Super Moderator

j-l-n

Guest

kkapsner

Super Moderator

j-l-n

Guest