Yuval200 Posted October 30, 2006 Share Posted October 30, 2006 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 More sharing options...
aspnetguy Posted October 30, 2006 Share Posted October 30, 2006 can you post the code for the whole page. I'll give it a test when you do Link to comment Share on other sites More sharing options...
jesh Posted October 30, 2006 Share Posted October 30, 2006 Are you calling that javascript before or after the browser has parsed through the file and built the DOM? Link to comment Share on other sites More sharing options...
aalbetski Posted October 30, 2006 Share Posted October 30, 2006 try adding the style attributeas.style.cellPadding="0";Just off the top of my head Link to comment Share on other sites More sharing options...
aspnetguy Posted October 30, 2006 Share Posted October 30, 2006 try adding the style attributeas.style.cellPadding="0";Just off the top of my head there is no cell-padding attribute in CSS (that I know of) it is an attribute of <table> Link to comment Share on other sites More sharing options...
aalbetski Posted October 30, 2006 Share Posted October 30, 2006 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 More sharing options...
jesh Posted October 30, 2006 Share Posted October 30, 2006 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 More sharing options...
aalbetski Posted October 30, 2006 Share Posted October 30, 2006 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 More sharing options...
Yuval200 Posted October 31, 2006 Author Share Posted October 31, 2006 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 More sharing options...
aspnetguy Posted October 31, 2006 Share Posted October 31, 2006 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 More sharing options...
jesh Posted October 31, 2006 Share Posted October 31, 2006 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 More sharing options...
Yuval200 Posted October 31, 2006 Author Share Posted October 31, 2006 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 More sharing options...
aspnetguy Posted October 31, 2006 Share Posted October 31, 2006 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. Link to comment Share on other sites More sharing options...
Yuval200 Posted October 31, 2006 Author Share Posted October 31, 2006 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 More sharing options...
aspnetguy Posted October 31, 2006 Share Posted October 31, 2006 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 More sharing options...
Yuval200 Posted November 1, 2006 Author Share Posted November 1, 2006 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 More sharing options...
aspnetguy Posted November 1, 2006 Share Posted November 1, 2006 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 More sharing options...
Yuval200 Posted November 1, 2006 Author Share Posted November 1, 2006 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 More sharing options...
aspnetguy Posted November 1, 2006 Share Posted November 1, 2006 try changing i=0 to var i=0 in both loops Link to comment Share on other sites More sharing options...
Yuval200 Posted November 1, 2006 Author Share Posted November 1, 2006 try changing i=0 to var i=0 in both loopsNope, nothing Link to comment Share on other sites More sharing options...
Yuval200 Posted November 1, 2006 Author Share Posted November 1, 2006 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 More sharing options...
aspnetguy Posted November 1, 2006 Share Posted November 1, 2006 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. Link to comment Share on other sites More sharing options...
Yuval200 Posted November 1, 2006 Author Share Posted November 1, 2006 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 More sharing options...
jesh Posted November 1, 2006 Share Posted November 1, 2006 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 More sharing options...
Chocolate570 Posted November 1, 2006 Share Posted November 1, 2006 Jesh is right. You should replace <= with <. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now