Arrayverarbeitung in Script bzw. Parameterübergaben in Funktionen

11/11/2016 - 12:07 von Heiko Wetteborn | Report spam
Hallo Fachmànner,

ich erstelle ein Dokument mit Eingabefeldern, in denen Zahlen eingegeben
werden sollen. Wenn der Fokus des Eingabefeldes verloren geht, soll die
eingegebene Zahl auf 6 Ziffern mit Nullen aufgefüllt werden. Also z. B.
12 wird zu 120000.
Geplant ist, dass im nachfolgenden Beispiel in beiden Eingabefeldern
entsprechende (zu kurze) Zahlen eingegeben werden. Z. B. im ersten Feld
eine !123" und im zweiten Feld eine "456". Die Ziffern sollen bei
Fokusverlust entsprechend auf "123000" im ersten und "456000" im zweiten
Eingabefeld aufgefüllt werden.
Da ich nicht für jedes Eingabefeld eine eigene JavaScript-Funktion
erstellen will, die immer identisch sein wird, dachte ich mir, dass ich
das ID-Tag immer gleich benenne und der Funktion den Index des Feldes
mitgebe (siehe onblur).
Und hier entstehen Probleme bzw. Fragen ...

1. Wie kann ich die Eingaben des zuletzt verlassenen Eingabefeldes
herausbekommen? Mit var kontonummer =
document.getElementById('konto[idx]').value; funktioniert es nàmlich
nicht. Mit einem einfachen var kontonummer =
document.getElementById('konto').value; wird das Script zwar
abgearbeitet, aber es wird das erste Eingabefeld mit dem zweiten Wert
überschrieben.

2. Muss ich innerhalb der Tabelle im ID-Tag denn wirklich "konto[1]
eingeben oder reicht ein einfaches konto[]?

3. Bin ich überhaupt im Prinzip auf dem richtigen Weg, mein Problem zu
lösen?

Keine Sorge, es wird nicht bei 2 Eingabefeldern bleiben, es werden
insgesamt 21 Eingabefelder werden und zusàtzlich 7 Felder, die an Hand
der eingegebenen Nummern vom Script belegt werden.


<html>
<head>
<script language="JavaScript">
function getkonto(index)
{
var idx = arguments[0];
var kontonummer = document.getElementById('konto[idx]').value;
if (kontonummer == "")
{
return;
}
var lang = kontonummer.length;
for (x = lang;x < 6;x++)
{
kontonummer = kontonummer + "0";
}
document.getElementById('konto[]').value = kontonummer;
alert("Index " + index + "Kontonummer " + kontonummer + "idx = " + idx);
}
</script>
</head>
<body>
<tr><td><input type="text" required name="konto[]" id="konto"
maxlength=6 size=7 onblur = "getkonto(1);" </td></tr>
<tr><td><input type="text" required name="konto[]" id="konto"
maxlength=6 size=7 onblur = "getkonto(2);" </td></tr>
</table>
 

Lesen sie die antworten

#1 Thomas PointedEars Lahn
11/11/2016 - 13:25 | Warnen spam
Heiko Wetteborn wrote:

Da ich nicht für jedes Eingabefeld eine eigene JavaScript-Funktion
erstellen will, die immer identisch sein wird,



Das brauchst Du auch nicht. (Wobei Du wahrscheinlich nicht „identisch“,
sondern „sehr àhnlich“ meinst.)

Du kannst entweder einen “bubbling” Event, also einen der im Dokumentbaum
nach oben verbreitet wird, an einer höheren Stelle im Dokumentbaum
behandeln; oder Du kannst dieselbe Funktion als Event-Listener für einen
oder mehrere Events einem oder mehreren Elementen hinzufügen.

Im ersteren Fall kannst Du die Funktion im Event-Handler-Attribut eines
gemeinsamen Vorfahren-Elements aufrufen; in beiden Fàllen kannst Du entweder
die Methode addEventListener() von Element-Objekten aufrufen oder der .on…-
Eigenschaft der Objekte eine Referenz auf die Funktion als Wert zuweisen.
Letzteres solltest Du im Event-Listener für das DOMContentLoaded-Event des
Dokuments und, wenn dieser nicht aufgerufen wurde, in dem für das load-Event
des body-Elements tun.

dachte ich mir, dass ich das ID-Tag immer gleich benenne und der Funktion
den Index des Feldes mitgebe (siehe onblur).



Entsprechend Deinem Markup meinst Du das id-_Attribut_. Eine ID ist eine
*ID* (Identitàtsiformation) weil sie im Dokumentkontext *eindeutig* sein
muss. Denselben Wert für das id-Attribut verschiedener Elemente im selben
Dokumentkontext anzugeben ist daher unzulàssig bzw. ungültig. Dein übriges
HTML ist leider auch ungültig; Siehe auch <http://validator.w3.org/>.

Und hier entstehen Probleme bzw. Fragen ...

1. Wie kann ich die Eingaben des zuletzt verlassenen Eingabefeldes
herausbekommen? Mit var kontonummer > document.getElementById('konto[idx]').value; funktioniert es nàmlich
nicht.



Im Event-Listener für das blur-Event eines Eingabe-Steuerelements kannst Du
this.value auslesen. Dieses Event wird immer dann ausgelöst, nachdem ein
Steuerelement den Fokus verloren hat.

Es könnte auch genügen, stattdessen auf das change-Event zu reagieren; es
wird immer dann ausgelöst, wenn sich der Wert eines Steuerelements geàndert
hat und es anschliessend den Fokus verloren hat. Das change-Event hat den
Vorteil, dass zumindest in modernen Benutzerprogrammen “bubbled” (siehe
oben).

2. Muss ich innerhalb der Tabelle im ID-Tag denn wirklich "konto[1]
eingeben oder reicht ein einfaches konto[]?



Nein.

3. Bin ich überhaupt im Prinzip auf dem richtigen Weg, mein Problem zu
lösen?



Nein. Du solltest zuerst die Grundlagen von HTML(5) und des DOM lernen, und
Dich mit Code-Richtlinien beschàftigen; dann kannst Du das Markup und den
clientseitigen Script-Code dafür leicht lesbar, verstehbar und somit leicht
wartbar schreiben. Viel Erfolg.

<https://developer.mozilla.org/de/Learn>

PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Ähnliche fragen