Jump to content

Problem with the getElementsByTagName method.

Yuval200

By Yuval200
in JavaScript

 Share

Recommended Posts

Yuval200 Newbie

Yuval200

Posted
Posted

Hi again guys :)This time I have a really annoying problem, hope you could solve it. I want JS to automaticly style tags using HTML DOM (Don't tell me to use CSS, because it's not what I need).So the first thing I tried to look at some code that Choco wrote at his blog, and changed it abit:

as=document.getElementsByTagName("table");for(i=0;i<=as.length;i++){as[i].cellPadding="0";as[i].cellSpacing="0";}

Yes, as you could imagine, it didn't worked.I tried to do something basic, that will tell me how many tags are in a document. So I wrote this short line:

alert(document.getElementsByTagName('link').length)

Printed 0. Then I replaced the 'link' with a 'td', 0. JS, why do you hate me :{?I'll be really greatfull if you could help me with my problems.Yuval.

Link to comment
Share on other sites
aalbetski Member

aalbetski

Posted
Posted

as I sais, it was off the top of my head. This WILL work:

<table border="1">	<tr>		<td>This</td><td>will</td><td>all</td><td>be</td><td>the same</td>	</tr></table><script>var as = document.getElementsByTagName("td")for(i=0;i<as.length;i++){	as[i].style.padding="10px"}</script>

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

But this won't:

<script>var as = document.getElementsByTagName("td")for(i=0;i<as.length;i++){	as[i].style.padding="10px"}</script><table border="1">	<tr>		<td>This</td><td>will</td><td>all</td><td>be</td><td>the same</td>	</tr></table>

Link to comment
Share on other sites
aalbetski Member

aalbetski

Posted
Posted

a complete working example. 

<html>	<script>	function SetTDs()	{		var as = document.getElementsByTagName("td")		for(i=0;i<as.length;i++)		{			as[i].style.padding="10px"		}	}	</script>	<body onload="SetTDs()">		<table border="1">			<tr>				<td>This</td><td>will</td><td>all</td><td>be</td><td>the same</td>			</tr>		</table>	</body></html>

Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted

This is interesting-Putting the script on the head section alerted 0.Putting the script on the body section alerted 0.Putting the script on the body tag inside the onload attribute alerted the number of the tds in the document.I really don't get it. Why?I don't want to do those things as a function. How can I do codes like: 

<!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" />		<link rel="stylesheet" type="text/css" href="css.css" />		<script type="text/javascript" src="script.js"></script>		<link rel="shortcut icon" href="favicon.png" />	</head>	<body><span class="what2do">Messages so far:</span><br /> <!--Page started: 20/6/2006 13:02 --><!--Page ended: Not yet --><table id="posts_table">				<tr valign="top" class="name_container"><td>					<div>By Nir on Wednesday, October, 2006. 19:52.                             					#<a href="java script: void(0)" onclick="open_popup('main.php?page=showpost&postid=3', 600, 250)" class="postlink">3</a></div>				</td></tr>				<tr class="content_container"><td><div><p>Test. This message does not exist.</p></div></td></tr>				<tr class="margin_row"><td> </td></tr>				<tr valign="top" class="name_container"><td>					<div>By Yuval200 on Saturday, October, 2006. 14:44.                             					#<a href="java script: void(0)" onclick="open_popup('main.php?page=showpost&postid=2', 600, 250)" class="postlink">2</a></div>				</td></tr>				<tr class="content_container"><td><div><p>This is message number 2. TEST.</p></div></td></tr>				<tr class="margin_row"><td> </td></tr>				<tr valign="top" class="name_container"><td>					<div>By Yuval200 on Saturday, October, 2006. 14:44.                             					#<a href="java script: void(0)" onclick="open_popup('main.php?page=showpost&postid=1', 600, 250)" class="postlink">1</a></div>				</td></tr>				<tr class="content_container"><td><div><p>Hello,<br />This is a test message, "test".</p></div></td></tr>				<tr class="margin_row"><td> </td></tr></table><a href="main.php?page=form" class="postlink" id="postmessage">Post a message</a>.		<br /><br />		<noscript>Javascript needs to be activated for better surfing.</noscript><br />		<div id="copyrights">			<p><span class="name">YuvPost!</span> version 1.0. All rights reserved to <a class="normal" href="mailto:yuval_ritt@hotmail.co.il">Yuval200</a><sup style="font-size: x-small">©</sup>, favicon by <a class="normal" href="http://www.famfamfam.com" target="_blank">Mark James</a>.</p>			<p><!--[if IE]>Best viewed with <a class="normal" href="http://www.mozilla.com/firefox/" target="_blank">Mozilla Firefox</a><br /><![endif]-->Valid <span class="help"><a href="http://validator.w3.org/check/referer" target="_blank" class="normal">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="normal">CSS</a></span>. <a href="main.php?page=cplogin" class="normal">Admin login</a>.</p>		</div>	</body></html>

Oh, and thank you guys for helping me, I'm really greatfull :)

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

to avoid functions and using th eonload event place this code as the last thing before </body>

as=document.getElementsByTagName("table");for(i=0;i<=as.length;i++){as[i].cellPadding="0";as[i].cellSpacing="0";}alert(as.length)

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
Putting the script on the head section alerted 0.Putting the script on the body section alerted 0.Putting the script on the body tag inside the onload attribute alerted the number of the tds in the document.I really don't get it. Why?
It's because browsers parse the code from the top of the page down to the bottom of the page. If you have some javascript that attempts to access an object that the browser hasn't seen yet, your script won't function as you might expect it to. This is why you have to either use the onload event to run the script after the page loads or put the script down at the bottom of the page just before the </body> tag.
Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted

Oh guys, thanks! That done it!Now, another problem if you could help.. In the bottom of the page, just before the </body> tag, I have placed a script tag with an src attribute, in short- an external JS file.There I included that table code, it worked great, but there is another thing that I wanted to do, and didn't actually worked -> I wanted to place a question mark after every dt tag.So I basicly done this:

var tags_dt		= document.getElementsByTagName("dt");for(i=0;i<=tags_dt.length;i++){	tags_dt[i].innerHTML+="?";}

The result, as you guest, nothing. I fought that it might not worked because I already used 'i' in another for loop, but it didn't worked even when I changed the 'i' in the loop to a 'j'.Thanks alot :).

Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted
don't you mean td tag?The reason you get nothing is because there are no <dt> tags on the page so the for loop never executes.
No, there is a tag called dt- http://w3schools.com/tags/tag_dt.aspAnd what do you mean in 'there are no dt tags on the page'? Yes there are. I have a file that contains one dt tag, and the file has a script with an src attribute that imports an external JS file.
Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

I know there is a <dt> tag, I was guessing because you were mentioning tables in the same post. I said there were no <dt> on the page based on that assumption since you have not provided the code for us to look at.Post the full code. I t will make it easier to debug and understand what you are having trouble with.

Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted
I know there is a <dt> tag, I was guessing because you were mentioning tables in the same post. I said there were no <dt> on the page based on that assumption since you have not provided the code for us to look at.Post the full code. I t will make it easier to debug and understand what you are having trouble with.
Oh, I see.. Hold on please :)
<!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" />		<link rel="stylesheet" type="text/css" href="css.css" />		<script type="text/javascript" src="script.js"></script>		<link rel="shortcut icon" href="favicon.png" />		<title>YuvPost! Posting System</title>	</head>	<body>  <dl>   <dt>Remmember Me</dt>   <dd>If you check this check box, then the system will plant a coockie in your computer that will remmember your nickname for 4 days. We suggest that you won't check the check box if you share this computer with other people.</dd>  </dl><a href="java script:void(0)" class="script" onclick="close_window()">Close this window.</a>		<br /><br />		<noscript>Javascript needs to be activated for better surfing.</noscript><br />		<div id="copyrights">			<p><span class="name">YuvPost!</span> version 1.0. All rights reserved to <a class="normal" href="mailto:yuval_ritt@hotmail.co.il">Yuval200</a><sup style="font-size: x-small">©</sup>, favicon by <a class="normal" href="http://www.famfamfam.com" target="_blank">Mark James</a>.</p>			<p><!--[if IE]>Best viewed with <a class="normal" href="http://www.mozilla.com/firefox/" target="_blank">Mozilla Firefox</a><br /><![endif]-->Valid <span class="help"><a href="http://validator.w3.org/check/referer" target="_blank" class="normal">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="normal">CSS</a></span>. <a href="main.php?page=cplogin" class="normal">Admin login</a>.</p>		</div>		<script type="text/javascript" src="htmlhandeling.js"></script>	</body></html>

And the htmlhandeling.js file (That's were I stored my table thing, and were I tried to get the dt thing to work..):

var tags_table	= document.getElementsByTagName("table");var tags_dt		= document.getElementsByTagName("dt")	;for(i=0;i<=tags_table.length;i++){	tags_table[i].cellPadding="0";	tags_table[i].cellSpacing="0";}for(i=0;i<=tags_dt.length;i++){	tags_dt[i].innerHTML+="?";}

I tried using the :after CSS pseudo, but it doesn't show up in IE. Thanks in advance :)

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

this logic is wrong i<=tags...this will cause the loop to error (index out of range) on the last number.use i<tags.... instead and see if that makes a difference. My guess is that the cellspacing and cellpadding aren't being applied to yiour tables either.

Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted
this logic is wrong i<=tags...this will cause the loop to error (index out of range) on the last number.use i<tags.... instead and see if that makes a difference. My guess is that the cellspacing and cellpadding aren't being applied to yiour tables either.
Nop.. I don't think it's the case. The cellpadding and cellspacing are being applied to my tables. But I did tryed changing the <= operator to < in the dt for loop, didn't do it.I really don't get it.. I wanted to test so I added the following code to the tag:
<dt onclick="this.innerHTML+='?'">

And it worked perfectly. I don't get it.

Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted

Ok, sorry for the double posting, but I got my error:It doesn't allow the .js document to have more then one for loop.So I have the following code:

//General Varibles. 1/11/06 16:57var browserType = navigator.appName;/************************************************************************/if (browserType == 'Microsoft Internet Explorer') {	document.body.style.overflowY.onClick = 'auto';}//Tags Varibles. 1/11/06 16:57var tags_input_button	= document.getElementsByTagName("input");var tags_table			= document.getElementsByTagName("table");var tags_dt				= document.getElementsByTagName("dt")	;/************************************************************************/for(a=0;a<=tags_table.length;a++) {	tags_table[a].cellPadding="0";	tags_table[a].cellSpacing="0";}for(i=0;i<=tags_input_button.length; i++) { //Styling definitons for <input /> button elements. 1/11/06 16:50.	if(tags_input_button[i].type == "submit" || tags_input_button[i].type == "reset") {		tags_input_button[i].style.border			= '1px solid black'	; //Border color.		tags_input_button[i].style.backgroundColor	= '#CFCFCF'			; //Background-color color.		tags_input_button[i].style.color			= 'black'			; //Text color.				if (browserType == 'Microsoft Internet Explorer')			tags_input_button[i].style.fontSize		= 'xx-small'		;	}} for(i=0;i<=tags_dt.length;i++){	tags_dt[i].innerHTML+="?";}

It only executes the code in the first loop he finds, And doesn't even tries to execute the other loops after the first loop.Anyone got an idea?Thanks guys, you helped me alot :)!

Link to comment
Share on other sites
Yuval200 Newbie

Yuval200

Posted
  • Author
Posted
what??? not more than 1 for loop, that is bogus. What is the exact error? there is no limitation to the number of for loops you can have.
I don't get it either. And I never get JS errors. Are they? I know there are errors in PHP for an example, but I never saw JS errors. How can I see the errors? (I'm using FF 1.5)
Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

It has to be because of what aspnetguy suggested earlier. If your tags_table array has 5 elements (0,1,2,3, and 4), you're attempting to run your for loop from 0 through 5 (inclusive) and that breaks your script. If you are testing this in Firefox and you open the JavaScript Console under the Tools menu, you should see an error telling you something like "tags_table has no properties" and your script dies.Get rid of the "<=" in your for loop.

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
Go to topic listing
×
×
  • Create New...