[JavaScript] getElementById

**TobiaZ** · 08.09.2008, 23:03

von welchem Element redest du?

**Anbu** · 08.09.2008, 23:06

Hier wäre eines davon:

Code:

<input type="text" name="i_bez_4' id="bez4" class="bez" value="blaaa" />

Kann man den in "getElementById" keine Variablen anstatt der id eintragen?

**TobiaZ** · 08.09.2008, 23:15

Ähm, guck dir mal bitte deinen HTML-Quelltext an. Da ist ein ziemlich offensichtlicher Fehler in den Anführungszeichen.

Wenn schon nicht das Code-Highlighting, dann hätte spätestens der Validator dich darauf aufmerksam gemacht!

**Anbu** · 08.09.2008, 23:20

sorry das hat gefehlt habs nur nich hier rein gepostet..is schon spät und programmierheut schon n weilchen..

Code:

echo'<input type="text" name="i_bez_4" id="bez4" class="bez" value="blaaa" />'

**TobiaZ** · 08.09.2008, 23:22

PHP-Code interessiert nicht! Du hast ein KLIENTSEITIGES Problem.

Konnte der korrekte Quellcode dein Problem jetzt lösen?

PHP-Code:


<html>

<head>

<title>Test</title>

</head>



<body>

<input type="text" name="i_bez_4" id="bez4" class="bez" value="blaaa" />





<script type="text/javascript">

var anzahl = 4;

var id = 'bez' + anzahl;



alert(document.getElementById(id).value);

</script>



</body>

</html>

**Anbu** · 08.09.2008, 23:30

hmm irgendwie klappts nicht....

Hier mal der betroffene Code:

PHP-Code:


        <table>

            <tr>

                <td>Gruppe:</td>

                <td><input type="text" name="gruppe" /></td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

                <th>Leistung</th>

                <th>Preis</th>

            </tr>

            <tr>

                <td>

                <input type="text" name="i_bez_1" id="bez1" class="bez" />

                <div id="leistung1"></div>

                </td>

                <td>

                <input type="text" name="i_preis_1" id="preis1" class="preis" />

                <div id="leistung2"></div>

                </td>

            </tr>

            <tr>

                <td><a href="#" onclick="leistung();">Weitere Leistung Hinzuf&uuml;gen</a></td>

                <td>&nbsp;</td>

                <input type="hidden" name="anzahl" id="anzahl" value="1" />

            </tr>

        </table>

Und hier die JS(extern)

Code:

function leistung() {
	document.getElementById("anzahl").value = parseInt(document.getElementById("anzahl").value) + 1;
	var anzahl = document.getElementById("anzahl").value;
	for(var i=2;i<=anzahl;i++)
	{
		var id = 'bez' + anzahl;
		alert(id);
		alert(document.getElementById(id).value);
	}
}

Woran kanns denn liegen? Die id wird ja im alert angezeigt. Nur im getElementId nicht

**TobiaZ** · 08.09.2008, 23:42

Ähm,

geh deinen Code mal bitte im Kopf durch:

- Im Quelltext ist ein "bez1" vorhanden, sonst nichts.
- Die Anzahl im Hiddenfield ist 1.
- Nach dem "Klick" wird die Anzahl um 1 erhöht (= 2).
- Jetzt wird versucht auf "bez2" zuzugreifen.

Fazit: Wäre cool, wenn bez2 auch schon existieren würde.

**Anbu** · 08.09.2008, 23:44

Sorry ich steh grad neben mir in der JS-Funktion werden die Felder generiert. habs jetzt nur weggelassen das du die Fehlerstelle vielleicht besser siehst.

Kann es sein dass wenn ich mit JS(innerHTML) inputfelder erstelle ich deren value garnicht abrufen kann? da sie ja nicht im Quellcode stehn?

**Anbu** · 08.09.2008, 23:50

Hier wäre die Vollständige Funktion:

Code:

function leistung() {
	document.getElementById("anzahl").value = parseInt(document.getElementById("anzahl").value) + 1;
	var anzahl = document.getElementById("anzahl").value;
	for(var i=2;i<=anzahl;i++)
	{
		var id = 'bez' + anzahl;
		var id2 = 'preis' + anzahl;
		document.getElementById("leistung1").innerHTML += '
		<br />
		<input type="text" name="i_bez_'+ anzahl +'" 
				id="bez'+ anzahl +'" value="'+ document.getElementById(id).value +'"
		class="bez" />
		<br />';
		document.getElementById("leistung2").innerHTML += '
		<br />
		<input type="text" name="i_preis_'+ anzahl +'" 
				id="preis'+ anzahl +'" value="'+ document.getElementById(id2).value +'"
		class="preis" />
		<br />';
	}
	document.getElementById("leistung1").innerHTML += '
	<br />
	<input type="text" name="i_bez_'+ anzahl +'" id="bez'+ anzahl +'" class="bez" />
	<br />';
	document.getElementById("leistung2").innerHTML += '
	<br /><input type="text" name="i_preis_'+ anzahl +'" id="preis'+ anzahl +'" class="preis" />
	<br />';
}

Problem ist da dass mit dem "getElementId" nicht funktioniert erstellt er zwar die input felder deren Inhalt wird aber sofort gelöscht sobald man weitere inputfelder anlegt

**TobiaZ** · 08.09.2008, 23:56

Sorry ich steh grad neben mir in der JS-Funktion werden die Felder generiert. habs jetzt nur weggelassen das du die Fehlerstelle vielleicht besser siehst.

Na super! Wozu mache ich mir die Mühe, deinen Code nachzuvollziehen, wenn du das eigentliche Problem wegvereinfachst, ohne das selbst zu bemerken? Danke dafür. Und zur Krönung ist es auch noch ein kommerzielles Projekt was bis morgen fertig sein muss, oder? *kein verständnis hab*

Solltest einfach mal ne Nacht über dein Problem schlafen und dann noch mal ne vollständige Problembeschreibung abliefern.

Kann es sein dass wenn ich mit JS(innerHTML) inputfelder erstelle ich deren value garnicht abrufen kann? da sie ja nicht im Quellcode stehn?

Quatsch. Dann könntest du ja mit deinem dynamischen content gar nicht mehr anfangen.

Aber es wäre natürlich cool, wenn du die Felder da "anhängen" würdest, BEVOR du versuchst darauf zuzugreifen.

Ganz generell solltes du diesen veralteten Kram da abstellen und statt dessen vernünftig am DOM manipulieren. Da kannst du dir auch sowas wie hidden-fields etc. ersparen.

**Anbu** · 09.09.2008, 00:03

ja hast recht

...es kommt bei mir grad sowieso kein brauchbarer gedakne mehr raus..

danke für die hilfe...gut nacht

**Anbu** · 09.09.2008, 09:16

So neuer Tag, neues Glück

Nochmal zur Problembeschreibung:

Ich will per JS-Funktion neue Input-Felder anlegen ohne dass der Inhalt in den vorangegangenen Input-Felder(Durch JS-Funktion erstellte) verloren geht.

HTML-Teil

Code:

<table>
	<tr>
		<td>Gruppe:</td>
		<td><input type="text" name="gruppe" /></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<th>Leistung</th>
		<th>Preis</th>
	</tr>
	<tr>
		<td>
		<input type="text" name="i_bez_1" id="bez1" class="bez" />
		<div id="leistung1"></div>
		</td>
		<td>
		<input type="text" name="i_preis_1" id="preis1" class="preis" />
		<div id="leistung2"></div>
		</td>
	</tr>
	<tr>
		<td><a href="#" onclick="leistung();">Weitere Leistung Hinzuf&uuml;gen</a></td>
		<td>&nbsp;</td>
		<input type="hidden" name="anzahl" id="anzahl" value="1" />
	</tr>
</table>

Externe JS-Datei

Code:

function leistung() {
	document.getElementById("anzahl").value = parseInt(document.getElementById("anzahl").value) + 1;
	var anzahl = document.getElementById("anzahl").value;
	if(anzahl > 2)
	{
		for(var i=2;i<=anzahl;i++)
		{
			var id = 'bez' + anzahl;
			var id2 = 'preis' + anzahl;
			document.getElementById(id).value = document.getElementById(id).value;
			document.getElementById(id2).value = document.getElementById(id2).value;
		}
	}
	document.getElementById("leistung1").innerHTML += '
	<br /><input type="text" name="i_bez_'+ anzahl +'" id="bez'+ anzahl +'" class="bez" /><br />';
	document.getElementById("leistung2").innerHTML += '
	<br /><input type="text" name="i_preis_'+ anzahl +'" id="preis'+ anzahl +'" class="preis" /><br />';
}

Das Problem liegt in der Forschleife. Ich wüsst grad nicht wie ichs schaff dass die alten Werte wieder in diese Felder kommen. Oder könnt ichs auch ganz verhindern, dass der Inhalt der vorangegangen Input-Felder(Durch JS-Funktion erstellt) verloren geht? Könnte mir da jemand n Denkanstoß geben.

**asp2php** · 09.09.2008, 09:37

wie Tobiaz bereits schon sagt:

Es gibt keine Elemente, auf die du zugreifen kannst!

Warum? Lese seine Antwort in aller Ruhe durch und vergleiche mit deinem Codes

**mcmurphy** · 09.09.2008, 10:13

meines Wissens müssen auch die bezeichner von name und id identisch sein...

name="i_bez_'+ anzahl +'" id="bez'+ anzahl +'"

[JavaScript] getElementById