Jump to content

how can I add something to even number elements?


tinfanide
 Share

Recommended Posts

Just wonder how the even number items have got some texts behind (appended).Please do help! Thank you.

<script>	var i;		for(i=1;i<=10;i++){				document.write("<span>" + "pt" + i + "</span>" + "<br />");			var span = "'<span>' + 'pt' + i + '</span>'";			if(i%2==0){						span.innerHTML = "even";			}				}	</script>

Link to comment
Share on other sites

Just wonder how the even number items have got some texts behind (appended).Please do help! Thank you.
<script>	var i;		for(i=1;i<=10;i++){				document.write("<span>" + "pt" + i + "</span>" + "<br />");			var span = "'<span>' + 'pt' + i + '</span>'";			if(i%2==0){						span.innerHTML = "even";			}				}	</script>

Just worked out something like this:
<script>	var i;		for(i=1;i<=10;i++){				document.write("<span>" + "pt" + i + "</span>");						if(i%2==0){						document.write(" even");			document.write("<br />");			}		else {document.write("<br />");}		}				</script>

It works as I wanted: add "even" after an even number and add breaking space after...But originally I wanted to use getElementsByTagName. Just wonder why I cannot use it in a variable?If you know, please tell me why. Thanks.

Link to comment
Share on other sites

Span in the original post was a string not a DOM element. To create a DOM element in code you would do this-

span = document.createElement("span");span.innerHTML = "even";document.appendChild(span);

Link to comment
Share on other sites

It not a good idea to use document.write it is very problematic.it would be best to write these into a parent container, and add 'even' to the span, as you loop through each even numbered loop.you can only really use getElementsByTagName on those elements that have already been created.below you will find both methods with and without getElementsByTagName.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var parent_elem = document.getElementById("span_placement");var populate = "";for(i=1;i<=10;i++)	{	if(i%2 ==0)		{		populate+='\n<span> Even </span><br/>';		}	else	{	populate+='\n<span> '+i+' </span><br/>';	}			}parent_elem.innerHTML=populate;// using getElementsByTagName on pre populated spanvar parent_elem = document.getElementById("span_placement2");var populate = "";for(i=1;i<=10;i++)	{	populate+='\n<span> '+i+' </span><br/>';	}	parent_elem.innerHTML=populate;			span_childs = parent_elem.getElementsByTagName("span");		for(i=1;i<span_childs.length;i=i+2)	{	span_childs[i].innerHTML=" Even ";	}	}/*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="span_placement"></div><hr /><div id="span_placement2"></div></body></html>

Link to comment
Share on other sites

Span in the original post was a string not a DOM element. To create a DOM element in code you would do this-
span = document.createElement("span");span.innerHTML = "even";document.appendChild(span);

Can you please tell me where to add in my script?I'd tested them but it did not work. I think I put them in the wrong place.
It not a good idea to use document.write it is very problematic.it would be best to write these into a parent container, and add 'even' to the span, as you loop through each even numbered loop.you can only really use getElementsByTagName on those elements that have already been created.below you will find both methods with and without getElementsByTagName.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var parent_elem = document.getElementById("span_placement");var populate = "";for(i=1;i<=10;i++)	{	if(i%2 ==0)		{		populate+='\n<span> Even </span><br/>';		}	else	{	populate+='\n<span> '+i+' </span><br/>';	}			}parent_elem.innerHTML=populate;// using getElementsByTagName on pre populated spanvar parent_elem = document.getElementById("span_placement2");var populate = "";for(i=1;i<=10;i++)	{	populate+='\n<span> '+i+' </span><br/>';	}	parent_elem.innerHTML=populate;			span_childs = parent_elem.getElementsByTagName("span");		for(i=1;i<span_childs.length;i=i+2)	{	span_childs[i].innerHTML=" Even ";	}	}/*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="span_placement"></div><hr /><div id="span_placement2"></div></body></html>

Yes, I see you base getElementsByTagName on a DOM element with an id. It seems that in js giving a html object an ID means converting it to a DOM object. A pure tag is not and we cannot style them. Edited by Tin
Link to comment
Share on other sites

Can you please tell me where to add in my script?I\'d tested them but it did not work. I think I put them in the wrong place.
Show us the code you tried.
Yes, I see you base getElementsByTagName on a DOM element with an id. It seems that in js giving a html object an ID means converting it to a DOM object. A pure tag is not and we cannot style them.
Giving an element an ID has nothing to do with it being "converted" to a DOM object. Every element is converted. Giving an ID to an element simply makes it easier to select the DOM element.EDIT: To illustrate,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Selecting DOM</title><script type='text/javascript'>function turnRed() {	var children = document.getElementsByTagName('div')[0].childNodes;	var elem, elNum = 0, whichEl = 2;	for (var x=0, e=children.length; x<e; x++) {		elem = children[x];		if (elem.nodeType == 1) {			elNum++;		}		if (elNum == whichEl) {			break;		}	}	elem.style.color = 'red';}</script></head><body><div>	<span>Span One</span>	<span>Span Two</span>	<span>Span Three</span>	<span>Span Four</span></div><button onclick='turnRed();'>Turn it red!</button></body></html>

Edited by ShadowMage
Link to comment
Share on other sites

<script>	var i;	span = document.createElement("span");	document.appendChild(span);	for(i=1;i<=10;i++){				document.write("<span>" + "pt" + i + "</span>" + "<br />");			var span = "'<span>' + 'pt' + i + '</span>'";			if(i%2==0){						span.innerHTML = "even";			}				}	</script>

This is the code I've tried.

Link to comment
Share on other sites

createElement and appendChild should replace the code you had before. Something like this:

<script type='text/javascript'>var i, span;for (i=1; i<=10; i++) {   span = document.createElement('span');   span.innerHTML = "pt"+i;   if (i%2 == 0) {	  span.innerHTML += " even";   }   document.appendChild(span);   //This line appends the <br> tag after each span   document.appendChild(document.createElement('br'));}</script>

Link to comment
Share on other sites

Show us the code you tried.Giving an element an ID has nothing to do with it being "converted" to a DOM object. Every element is converted. Giving an ID to an element simply makes it easier to select the DOM element.EDIT: To illustrate,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Selecting DOM</title><script type='text/javascript'>function turnRed() {	var children = document.getElementsByTagName('div')[0].childNodes;	var elem, elNum = 0, whichEl = 2;	for (var x=0, e=children.length; x<e; x++) {		elem = children[x];		if (elem.nodeType == 1) {			elNum++;		}		if (elNum == whichEl) {			break;		}	}	elem.style.color = 'red';}</script></head><body><div>	<span>Span One</span>	<span>Span Two</span>	<span>Span Three</span>	<span>Span Four</span></div><button onclick='turnRed();'>Turn it red!</button></body></html>

Still studying this one. A bit harder than some other.
Link to comment
Share on other sites

createElement and appendChild should replace the code you had before. Something like this:
<script type='text/javascript'>var i, span;for (i=1; i<=10; i++) {   span = document.createElement('span');   span.innerHTML = "pt"+i;   if (i%2 == 0) {	  span.innerHTML += " even";   }   document.appendChild(span);   //This line appends the <br> tag after each span   document.appendChild(document.createElement('br'));}</script>

Thanks for this sample codes.I see what appendChild and createElement mean now.Still drilling into childNodes.May test more and come back.
Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Selecting DOM</title><script type='text/javascript'>function turnRed() {var children = document.getElementsByTagName('div')[0].childNodes;var elem, elNum = 0, whichEl = 2;for (var x=0, e=children.length; x<e; x++) {elem = children[x];if (elem.nodeType == 1) {elNum++;}if (elNum == whichEl) {break;}}elem.style.color = 'red';}</script></head><body><div><span>Span One</span><span>Span Two</span><span>Span Three</span><span>Span Four</span></div><button onclick='turnRed();'>Turn it red!</button></body></html>

Could you explain why elNum works well to represent the span elements? I didn't see elNum linked to the span elements.And,Why the whichEl starts from 1, not 0?

Link to comment
Share on other sites

Could you explain why elNum works well to represent the span elements? I didn't see elNum linked to the span elements.And,Why the whichEl starts from 1, not 0?childNodes returns an array of all the direct descendants of a node.  Including text nodes.  The line breaks in the HTML code create text nodes.  Any other text not in a nested tag would also create a text node.  So because childNodes returns the text nodes too, we need to test each node as we loop through them to see if it is an element node (ie, its nodeType is equal to 1).  There are other types besides text and element, so that's why we check if it's an element.elNum doesn't really represent the span elements at all.  It simply counts them (or any other element).  If there were other tags (div, p, input, etc.) it would count those as well.  Every time an element node is encountered elNum is incremented.whichEl is just which element we are trying to target.  It starts at 1 because elNum starts at 0.  If elNum is at 0, then no element tags have been found.  If we're targeting the second element (ie, whichEl = 2) we'd have to wait until elNum is equal to 2.  After the first element is found, elNum will be incremented to 1.  After the second is found it will be incremented to 2.Hope that clears it up a little bit.Just remember, this was a simple example, meant to illustrate that the DOM elements are [i]always[/i] created whether an element has an id or not.  It probably isn't really useful for much in the "real world".
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...