DOM: Funktionsaufruf bei dynamischen Elementen
0 
molily
DOM: Funktionsaufruf bei dynamischen Elementen
Hi,
wie kann bei dynamisch erzeugten Elementen ein Funktionsaufruf realisiert werden?
Bei meiner unten stehenden Lösung wird die Funktion "check_artikelnr" einfach nicht aufgerufen. Es wird auch kein Fehler angezeigt...
Auszug aus Quelltext:
function more_orders ()
{
var newRow = document.createElement("tr");
newRow.id = "tr"+y;
document.getElementById("table_foot").appendChild(newRow);
for(var x=0; x<=3 ; x++)
{
var newCol = document.createElement("td");
newCol.id = "td"+y+x;
document.getElementById("tr"+y).appendChild(newCol);
var newTextField = document.createElement("input");
newTextField.type = "text";
newTextField.id = "textfield"+y+x;
newTextField.style.width = "75px";
newTextField.onchange = "check_artikelnr(this.id)";
document.getElementById("td"+y+x).appendChild(newTextField);
}
y++;
}
Danke und viele Grüße Mika
-
Hallo,
wie kann bei dynamisch erzeugten Elementen ein Funktionsaufruf realisiert werden?
Wie bei nicht dynamisch erzeugten auch.
Schema:
elementobjekt.onevent = handlerfunktion;handlerfunktion ist dabei ein Funktionsname und *kein* String.
newTextField.onchange = "check_artikelnr(this.id)";
newTextField.onchange = check_artikelnr;
Parameterübergabe ist unnötig. Da check_artikelnr im Kontext des Elements ausgeführt wird, reicht es, darin mit this.id auf die ID zuzugreifen.
Mathias
-
Hi,
danke erst mal für die schnelle antwort
handlerfunktion ist dabei ein Funktionsname und *kein* String.
wenn ich es nicht mehr als string schreibe, also die anführungszeichen weg lasse, erscheint die JavaScript-Fehlermeldung
"Objekt erforderlich " ???hier mal der komplette Quelltext:
<html>
<head>
<title></title><script type="text/javascript">
function check_artikelnr (object)
{
if(document.getElementById(object).value == "")
{
alert("Bitte Artikelnummer eintragen!");
document.getElementById(object).focus();
}
}var y = 0;
function more_orders ()
{
var newRow = document.createElement("tr");
newRow.id = "tr"+y;
document.getElementById("table_foot").appendChild(newRow);for(var x=0; x<=3 ; x++)
{
var newCol = document.createElement("td");
newCol.id = "td"+y+x;
document.getElementById("tr"+y).appendChild(newCol);var newTextField = document.createElement("input");
newTextField.type = "text";
newTextField.id = "textfield"+y+x;
newTextField.style.width = "75px";
newTextField.onchange = check_artikelnr(this.id);document.getElementById("td"+y+x).appendChild(newTextField);
}y++;
alert(document.getElementById("table_foot").innerHTML);
}
</script>
</head>
<body><table border="0">
<thead>
<tr align="middle">
<td>Artikel-Nr.</td>
<td>Artikel-Bez.</td>
<td>Größe</td>
<td>Menge</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" style="width:75px" name="artikelnr" onchange="check_artikelnr (this.name)"></td>
<td><input type="text" style="width:75px" name="artikelbez" onchange="check_artikelbez (this.name)"></td>
<td><input type="text" style="width:75px" name="groesse" onchange="check_groesse (this.name)"></td>
<td><input type="text" style="width:75px" name="menge" onchange="check_menge (this.name)"></td>
</tr>
<tr>
<td><input type="text" style="width:75px" name="artikelnr1" onchange="check_artikelnr (this.name)"></td>
<td><input type="text" style="width:75px" name="artikelbez1" onchange="check_artikelbez (this.name)"></td>
<td><input type="text" style="width:75px" name="groesse1" onchange="check_groesse (this.name)"></td>
<td><input type="text" style="width:75px" name="menge1" onchange="check_menge (this.name)"></td>
</tr>
<tr>
<td><input type="text" style="width:75px" name="artikelnr2" onchange="check_artikelnr (this.name)"></td>
<td><input type="text" style="width:75px" name="artikelbez2" onchange="check_artikelbez (this.name)"></td>
<td><input type="text" style="width:75px" name="groesse2" onchange="check_groesse (this.name)"></td>
<td><input type="text" style="width:75px" name="menge2" onchange="check_menge (this.name)"></td>
</tr>
</tbody>
<tfoot id="table_foot"></tfoot>
</table><br>
<a href="#" onclick="more_orders ()">Bestellliste hier erweitern</a>
</body>
</html>-
hi,
wenn ich es nicht mehr als string schreibe, also die anführungszeichen weg lasse, erscheint die JavaScript-Fehlermeldung
"Objekt erforderlich " ???function check_artikelnr (object)
Verzichte auf den Parameter, und greife innerhalb der Funktion über this auf das Element zu.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Verzichte auf den Parameter, und greife innerhalb der Funktion über this auf das Element zu.
wenn ich den parameter weglasse geht gar nichts mehr
und der eventhandler onchange wird schon ausgeführt wenn ich auf den Link klicke um das Objekt (also die Textfelder) zu erzeugen??
-
hi,
Verzichte auf den Parameter, und greife innerhalb der Funktion über this auf das Element zu.
wenn ich den parameter weglasse geht gar nichts mehr
Taugt als problembeschreibung nichts.
und der eventhandler onchange wird schon ausgeführt wenn ich auf den Link klicke um das Objekt (also die Textfelder) zu erzeugen??
Dann hast du keine Funktionsreferenz zugewiesen, sondern die Funktion aufgerufen. Schau noch mal nach, wie Mathias die Syntax gerade eben beschrieben hat.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
danke noch mal an alle die mir bei meinem Problem geholfen haben.
nun funtionierts, hier die Lösung:
<html>
<head>
<title></title><script type="text/javascript">
function check_artikelnr_statisch (object)
{if(document.getElementById(object).value == "")
{
alert("Bitte Artikelnummer eintragen!");
document.getElementById(object).focus();
}}
function check_artikelnr_dynamisch ()
{if(this.value == "")
{
alert("Bitte Artikelnummer eintragen!");
this.focus();
}}
var y = 0;
function more_orders ()
{
var newRow = document.createElement("tr");
newRow.id = "tr"+y;
document.getElementById("table_foot").appendChild(newRow);for(var x=0; x<=3 ; x++)
{
var newCol = document.createElement("td");
newCol.id = "td"+y+x;
document.getElementById("tr"+y).appendChild(newCol);var newTextField = document.createElement("input");
newTextField.type = "text";
newTextField.id = "textfield"+y+x;
newTextField.style.width = "75px";
newTextField.onchange = check_artikelnr_dynamisch;document.getElementById("td"+y+x).appendChild(newTextField);
}y++;
//alert(document.getElementById("table_foot").innerHTML);
}
</script>
</head>
<body><table border="0">
<thead>
<tr align="middle">
<td>Artikel-Nr.</td>
<td>Artikel-Bez.</td>
<td>Größe</td>
<td>Menge</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" style="width:75px" name="artikelnr" onchange="check_artikelnr_statisch(this.name)"></td>
<td><input type="text" style="width:75px" name="artikelbez" onchange="check_artikelbez ()"></td>
<td><input type="text" style="width:75px" name="groesse" onchange="check_groesse ()"></td>
<td><input type="text" style="width:75px" name="menge" onchange="check_menge ()"></td>
</tr>
<tr>
<td><input type="text" style="width:75px" name="artikelnr1" onchange="check_artikelnr_statisch(this.name)"></td>
<td><input type="text" style="width:75px" name="artikelbez1" onchange="check_artikelbez ()"></td>
<td><input type="text" style="width:75px" name="groesse1" onchange="check_groesse ()"></td>
<td><input type="text" style="width:75px" name="menge1" onchange="check_menge ()"></td>
</tr>
<tr>
<td><input type="text" style="width:75px" name="artikelnr2" onchange=check_artikelnr_dynamisch></td>
<td><input type="text" style="width:75px" name="artikelbez2" onchange="check_artikelbez ()"></td>
<td><input type="text" style="width:75px" name="groesse2" onchange="check_groesse ()"></td>
<td><input type="text" style="width:75px" name="menge2" onchange="check_menge ()"></td>
</tr>
</tbody>
<tfoot id="table_foot"></tfoot>
</table><br>
<a href="#" onclick="more_orders ()">Bestellliste hier erweitern</a>
</body>
</html>-
in Funktion in der das objekt dynamisch erzuegt wird:
newTextField.onchange = check;
// Funktionsaufruf OHNE Anführungszeichen
// und ohne KLAMMERN!!! => keine Parameterübergabe möglichFuntkion die aufgerufen wird:
function check()
{
if(this.value == "")
{
alert("Bitte Artikelnummer eintragen!");
this.focus();
}
}// Auf das entsprechende Element, wird mit THIS zugegriffen
-
-
-
-
-
-