gleiches Element mehrmals ändern getElementById() - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > gleiches Element mehrmals ändern getElementById()

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > gleiches Element mehrmals ändern getElementById()

Pages: [1]

geschrieben von Klaush am 23.11.2006 - 14:47

Ziel ist es je nach Auswahl verschiedene Elemente einzublenden (TextBox und SelectBox).

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36:

<script language="JavaScript" type="text/javascript">
<!--

function addX(SAExt, e)
{

	if (SAExt == "X")
		setOuterHTML(document.getElementById("SAExt_MNr_X_"+e+""), '<input class="inputgrid" type="text" name="Kurztext" style="width:100%">');
	else
		setOuterHTML(document.getElementById("SAExt_MNr_X_"+e+""), '<select class="inputgrid" name="Ressource" size="1" style="width:100%"><option value=""></option><option style=background:darkblue;color:white;>Ressource</option>$MNr</select>');

	return true;
}

function setOuterHTML(element, Value)
{

	if (typeof(element.outerHTML) != 'undefined')
		element.outerHTML = Value;
	else
	{
		var range = document.createRange();
		range.setStartBefore(element);
		element.parentNode.replaceChild(range.createContextualFragment(Value), element);
	}
}
// -->
</script>

<div id="SAExt_MNr_X_<? echo $i; ?>">

<select name="SAExt" size="1" style="width:40px" onchange="addX(this.options[this.selectedIndex].value, <? echo $i; ?>)">
			<option value=""></option>
			<option value="M">M</option>
			<option value="X">X</option>
			</select>

Die Auswahl funktioniert soweit ganz gut. Wenn ich nach der ersten Auswahl ein zweites Mal eine Auswahl treffen möchte, verliert er das Objekt in der Funktion setOuterHTML(element), der Inhalt (Value) wird aber sauber übergeben. Hat irgend jemand eine Idee wo der Fehler stecken kann?

geschrieben von Micha am 23.11.2006 - 20:07

Hi,

das hast Du doch auch so veranlasst. Du ersetzt das DIV durch etwas anderes (input). Somit ist die ID natürlich weg, auf die Du versuchst zu zugreifen (null).

Nach der ersten Auswahl steht bspw. folgendes im Code:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13:

<body>

<select class="inputgrid" name="Ressource" size="1" style="width: 100%;"><option value=""></option><option style="background: darkblue none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: white;">Ressource</option></select>

<select name="SAExt" size="1" style="width: 40px;" onchange="addX(this.options[this.selectedIndex].value, 1)">
			<option value=""></option>
			<option value="M">M</option>

			<option value="X">X</option>
			</select>
		
		
		</body></html>

Das DIV mit der ID SAExt_MNr_X_1 existiert nicht mehr.

Micha

geschrieben von Klaush am 23.11.2006 - 23:58

Manchmal sieht man den berühmten Wald nicht mehr ...

	HTML-Quelltext
1:	setOuterHTML(document.getElementById("SAExt_MNr_X_"+e+""), '<input id="SAExt_MNr_X_'+e+'" class="inputgrid" type="text" name="Kurztext" style="width:100%">');

Danke für den Denkanstoß.....

geschrieben von Micha am 24.11.2006 - 07:10

Hi,

keine Ursache...

Micha