DaniWeb IT Discussion Community - View Single Post

Re: Urgent.....Dynamic Changes....

May 3rd, 2005

Hi,
I don' think you have worded your question very well. And I am not sure why you want to create this content in this manner (though perhaps its just POC and you'll reveal your true ideas later?).

Anyhow, I think that your problem is your understanding of the getElementByTagName function. This function returns a list of elements matching the argument name. In this case "SELECT". Even if there is only one such element, it will be returned in a list. So you'd need to retrieve it using the item method.. i.e. di.item(0).

I have edited your code, so I could get a feel for what you were after and how you were doing it. I think I've created something along the lines you were after, that is also a little simpler to read and follow.

It seemed sensible to me to pass the node that created the event as an argument to the function, this way you won't have to search for it when it gets there... apart from that; the only other difference is it runs in Mozilla as well... Which is a trend in almost all my code as Mozilla is much simpler to debug than IE.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM form elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<script type="text/javascript">
var rowCount = 0;
 
function appendtable(){
 
	// get html elements
	var divElement   = document.getElementById("divide");
 
	// create a new table each time.
	var tableElement = document.createElement("table");
 
	// create new row and cells
	var newTr 	= document.createElement("tr");
	var td0 	= document.createElement("td");
	var td1 	= document.createElement("td");
	var td2 	= document.createElement("td");
	var td3 	= document.createElement("td");
 
	// create new select
	var oSelect	= document.createElement("select");
 
	// set onchange event for select box
	oSelect.setAttribute("onchange", "txtChange(this);");
 
	// keep track of the id of the object for interest.
	oSelect.setAttribute("id", "txtchange" + rowCount++);
 
	// create and add new option 0
	var oOption0 = document.createElement("OPTION");
	var t0 = document.createTextNode("Ferrari");
	oOption0.setAttribute("value", 4);
	oOption0.appendChild(t0);
	oSelect.appendChild(oOption0);
 
	// create and add new option 1
	var oOption1 = document.createElement("OPTION");
	var t1 = document.createTextNode("Fessari");
	oOption1.setAttribute("value", 3);
	oOption1.appendChild(t1);
	oSelect.appendChild(oOption1);
 
	// cretae text elements
	var txt1 = document.createElement("input");
	txt1.type="text";
	txt1.value="mamu";	
	var txt2=document.createElement("input");
	txt2.type="text";
	txt2.value="Machan";	
	var txt3=document.createElement("input");
	txt3.type="text";
	txt3.value="maplai";
 
	// add content to the table.
	td0.appendChild(oSelect);	
	td1.appendChild(txt1);
	td2.appendChild(txt2);
	td3.appendChild(txt3);
	newTr.appendChild(td0);
	newTr.appendChild(td1);
	newTr.appendChild(td2);
	newTr.appendChild(td3);
	tableElement.appendChild(newTr);
	divElement.appendChild(tableElement);
 
	// only need to do this ugly hack for Internet Explorer.... don't know why. never had to do this with dynamic nodes before
	// must be some bug i have missed.
	if(window.event) {
		document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
	}
}
 
// function requires a node object.
function txtChange(noden) {
	alert("hi: '" + (noden?noden.id:"node is null") + "'");
 
	var di = document.getElementsByTagName("select");
	//when i tried to get the selected value its showing error.
	// tag name function returns a node list.. not a single node.. so if only one,
	// then access using di.item(0)
 
	// however using my code changes, there is no reason to establish the node here, as it is
	// being passed in as a parameter.
 
 
}
</script>
 
<style type="text/css">
<!--
/* cascading style sheet */
body { font-family:verdana; }
-->
</style>
 
</head>
<body>
 
<div id="divide">
 
<input type="button" onclick="appendtable()" value="Press me">
 
</div>
 
</body>
</html>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM form elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var rowCount = 0;

function appendtable(){
	
	// get html elements
	var divElement   = document.getElementById("divide");
	
	// create a new table each time.
	var tableElement = document.createElement("table");
	
	// create new row and cells
	var newTr 	= document.createElement("tr");
	var td0 	= document.createElement("td");
	var td1 	= document.createElement("td");
	var td2 	= document.createElement("td");
	var td3 	= document.createElement("td");
	
	// create new select
	var oSelect	= document.createElement("select");
	
	// set onchange event for select box
	oSelect.setAttribute("onchange", "txtChange(this);");
	
	// keep track of the id of the object for interest.
	oSelect.setAttribute("id", "txtchange" + rowCount++);
	
	// create and add new option 0
	var oOption0 = document.createElement("OPTION");
	var t0 = document.createTextNode("Ferrari");
	oOption0.setAttribute("value", 4);
	oOption0.appendChild(t0);
	oSelect.appendChild(oOption0);
	
	// create and add new option 1
	var oOption1 = document.createElement("OPTION");
	var t1 = document.createTextNode("Fessari");
	oOption1.setAttribute("value", 3);
	oOption1.appendChild(t1);
	oSelect.appendChild(oOption1);
	
	// cretae text elements
	var txt1 = document.createElement("input");
	txt1.type="text";
	txt1.value="mamu";	
	var txt2=document.createElement("input");
	txt2.type="text";
	txt2.value="Machan";	
	var txt3=document.createElement("input");
	txt3.type="text";
	txt3.value="maplai";
	
	// add content to the table.
	td0.appendChild(oSelect);	
	td1.appendChild(txt1);
	td2.appendChild(txt2);
	td3.appendChild(txt3);
	newTr.appendChild(td0);
	newTr.appendChild(td1);
	newTr.appendChild(td2);
	newTr.appendChild(td3);
	tableElement.appendChild(newTr);
	divElement.appendChild(tableElement);
	
	// only need to do this ugly hack for Internet Explorer.... don't know why. never had to do this with dynamic nodes before
	// must be some bug i have missed.
	if(window.event) {
		document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
	}
}

// function requires a node object.
function txtChange(noden) {
	alert("hi: '" + (noden?noden.id:"node is null") + "'");
	
	var di = document.getElementsByTagName("select");
	//when i tried to get the selected value its showing error.
	// tag name function returns a node list.. not a single node.. so if only one,
	// then access using di.item(0)
	
	// however using my code changes, there is no reason to establish the node here, as it is
	// being passed in as a parameter.
	
	
}
</script>

<style type="text/css">
<!--
/* cascading style sheet */
body { font-family:verdana; }
-->
</style>

</head>
<body>

<div id="divide">

<input type="button" onclick="appendtable()" value="Press me">

</div>

</body>
</html>

enjoy.