for(i=0;i<d.length;i++)????

[Former Member]

var d = document.getElementsByTagName('td');
for(i=0;i<d.length;i++){


ok, I'm understanding these proboards codes more and more everyday.
But here is one section that is used ALOT and I just can't figure it out.

I know that var d is the (td) element
and i=0
and "i<d.length" is saying "the length of (td) is less than 0....no that don't make sense.....maybe it's saying 0 is less than the length of the td .....?

and I think that "for" means loop
and ++ means sometime of increment.

But I just can't put it all together.


Can somebody please elaborate?
Thanks

[uzi]

for ( i = 0; i < d.length; i++ )

1) Variable i is set to the number 0.
2) While variable i is less than d.length, repeat this block of code
3) Add one to variable i.

When you use getElementsByTagName(), all child elements matching the tag name are returned as an array. When used on an array object, the length() method returns the number of elements present in the array.

If there are 35 <td>s on the page, d.length will return 35. Likewise, d will be an array with that contains 35 (HTML DOM) objects - the 35 <td>s.

That's why the loop is used.. in this case you are essentially checking every TD to see if your conditions are true.

var d = document.getElementsByTagName('td');

for ( i = 0; i < d.length; i++ )
{
   if ( d[i].className == 'titlebg' )
   {
       d[i].innerHTML = "This is a titlebg!";
   }
}

The above code, if placed at the bottom of the page, would change the innerHTML (the content inside) of every <TD> whose class is 'titlebg'. Every time the loop is ran, the if() statement is ran against the next element in the array. The first time it is ran, d is the same as d[0]. The second time, d is the same as d[1], and so on.

See section 7a.

[Former Member]

Thanks much!
I still need to read it about 10 more times to sink it all in, but I got a good idea from a quick read.

On the other hand,
...ARE YOU KIDDING ME!?!?!

I never knew about this tutorial!
I have been looking for something like this forever.

I'm about to start reading and learning right now.

Thanks Alot for the help!

[uzi]

Aug 20, 2011 20:51:28 GMT -8 game said:

Thanks much!
I still need to read it about 10 more times to sink it all in, but I got a good idea from a quick read.

On the other hand,
...ARE YOU KIDDING ME!?!?!

I never knew about this tutorial!
I have been looking for something like this forever.

I'm about to start reading and learning right now.

Thanks Alot for the help!

Yup yup no prob, I made that tutorial something like two or three years ago. I plan on releasing a new edition before the end of this month, I'll PM you when that happens.

[Former Member]

Yea, I have read it all and been fiddling around with the methods that you have explained.
I understand the loop concept completely now.

I'm still having trouble targeting an element though.

For instance,
I was testing myself and tried to add text before 'Forum Statistics" in the info center.
I haven't succeeded.
This is the code I have created.
I can't find the flaw in it.

<script type="text/javascript">
if(location.href.match(/action/) || location.href.match(/action=home/))
{
var note = "Testing";
var welcome = document.getElementsByTagName("td");
for(b=0;b<welcome.length;b++)
{
if(welcome.className.match(/cattext/i) && welcome.innerHTML.match(/statistics/i)
&& welcome.width == "100%")
{welcome.innerHTML+="note"}
}}
</script>

Do you see it?
Or am I just not specifying enough detail for the browser to find the element?

I have tried finding a width but don't see one.
I see alot of codes are specifying widths such as "62%" and such.
I "viewed source" and searched for 66% and didn't have a match.
Makes me wonder where the coders are finding these numbers.

EDIT: I FOUND A WIDTH
still doesn't work

[SubDevo]

Hi Game. There are a few reasons...
The code doesn't run with your current location check.
If you look at it, it says "if the location.href matches "action" or "action=home", run the code." If you are on the home page, neither of these conditions are true and the code will not run. If you add ! to the beginning of the first regex, then the code will run. The "!" means "not".

if(!location.href.match(/action/) || location.href.match(/action=home/))

This is where pb_action would help you out. You could replace your current check with:

if(pb_action=="home")

---

If you are looping through the tds then the class name you need to look for is "catbg". "cattext" is the class of the font tag (firstChild) within that td. So, change your code to look for "font" instead of "td". Once found, you add your text. Note that the added text will not be bold since the Forum stats is inside of a bold tag and you are adding the text outside of the bold tag. If you want to add it to the bold tag, use document.getElementsByTagName("b") instead of "font". Doing so would simplify it even further because now you only need to check to see if the innerHTML=="Forum Statistics". If it does, then add the text...
Since you are doing this on your own, I won't post the code. Just play around with it and post back with your questions. Someone will point you in the right direction.

I HIGHLY recommend that you utilize the developer tools that come with Chrome, Opera and Safari. If using FireFox, install the Firebug plugin. Now, you can just right click an element on your page and click "Inspect Element". With IE, install the IE Developer Toolbar. There is no "right click" for this one. It adds a button to your toolbar that you need to click first.
These tools are MUCH easier than searching the source and you can instantly see the DOM structure of the page, the element position within the DOM tree and see or change it's attributes.

[Former Member]

Thanks Sub!
The developer tool I already had and didn't even know it.
Yes, that will be my new favorite tool now. ;D
I ued it and it makes searching HTML much much easier.
Thanks for the heads up.

But still ..............
my code is not working.
This is what I have this time:

<script type="text/javascript">
if(pb_action == "home")
{
var note = "Testing";
var welcome = document.getElementsByTagName("b");
for(b=0;b<welcome.length;b++)
{
if(welcome.innerHTML.match(/Forum Statistics/i)
{
welcome.innerHTML+="note"
}
}}
</script>

I'm still not seeing the error ....

P.S.
Sub,
I have used the PB_action on my test site since the day that you sent it to me.
I just wasn't sure that it was used as simple as:
if(pb_action ==(/...../)

[SubDevo]

You are SO close! You are missing a ) at the end...

if(welcome[b].innerHTML.match(/Forum Statistics/i))

You can also check for equality rather than use match. It is faster.

if(welcome.innerHTML=="Forum Statistics")

FYI...

welcome[b].innerHTML+="note"

Will add the text "note" to "Forum Statistics", not the value of the variable.
Remove the "" to use the variable value.

welcome[b].innerHTML+=note

[Former Member]

;D
I can't believe I looked past that small error.
I basically went through this code with a fine tooth comb!

and yes,
I wasn't thinking about it, but I think I understand that rule now:

if it's inside quotes, it displays text, if not it displays the value of a variable.

That's correct?

I'm going to mess around now that I have learned my error and see what else i can do.

I'll resort back to this post with any questions.
Thanks again!

[SubDevo]

Aug 21, 2011 8:03:50 GMT -8 game said:

and yes,
I wasn't thinking about it, but I think I understand that rule now:

if it's inside quotes, it displays text, if not it displays the value of a variable.

That's correct?

Exactly...

Another tip... Test your code in more than one browser. They all have their "quirks" and you may get unexpected results.
Personally, I test all my codes in IE, FF, Opera, Safari and Chrome.
It is very frustrating to create a code (especially if it is large/complex) only to find that other browsers do not like it. Also, do not use MS Office, MS Word or similar rich text editors to write or store code. They will replace some characters with crud you don't want. To be safe, only use notepad (with word wrap off).

[Former Member]

Ok, I only have IE and FF at the moment but will do.

Alright,
I've been trying different things and have been struck by curiosity again.
I am curious of how to use a variable with the match() statement.

Here's what I am piddling around with:

<script type="text/javascript">
if(pb_action == "home")
{
var board1 = "Another";
var welcome = document.getElementsByTagName("td");
for(b=0;b<welcome.length;b++)
{
if(welcome.className.match(/windowbg2/i) && welcome.width == "66%" && welcome.innerHTML.match == board1)
{
welcome.innerHTML+="Here I am"
}
}}
</script>

I am attempting to match the variable "board1" which holds the value "Another".

In other words I want it to match the word "Another" via the variable "board1".

How is this done?

[SubDevo]

welcome.innerHTML.match(board1)

[uzi]

Matching the innerHTML of the entire TD cell probably isn't the best way to do this. It works, so we can continue using it for the example.

match() doesn't work how you are using it. match() is a method and must be called using parenthesis. It isn't a property, so it won't work how you are using it.

Your example welcome[b].innerHTML.match == board1 is wrong for a few reasons. What that basically says is that welcome[b].innerHTML.match is equal to the value of board1. This isn't true, because match() can't return a string. match() either returns true or false.

Instead, you should use: welcome[b].innerHTML.match(/Another/i). There is no reason, in this case, to use the variable board1. If you want to use a Regular Expression as a variable, you'd have to create a new RegExp() object.

Also, you should check for the class like this: welcome[b].className == 'windowbg', there is no reason to use match() in that case.

You should learn more about regular expressions asap. Here's your code, rewritten by me (not tested).

<script type='text/javascript'>
if ( pb_action == 'home' )
{
    for ( var td = document.getElementsByTagName('td'), i = 0; i < td.length; i++ )
    {
        if ( td[i].className == 'windowbg2' && td[i].width == '66%' && td[i].innerHTML.match(/Another/i) )
        {
            td[i].innerHTML += 'Here I am';
            break;
        }
    }
}
</script>

[Former Member]

Thanks Sub.

and to Devin,
ok, so I need to better determine when match() and == are necessary. Got ya.

and

off to read up on regular expressions now ;D

Thanks

[uzi]

Yes.

match() is a method that can be used on a string (welcome[b].innerHTML returns a string) to check if a regular expression can be found in a string. To correct my last post, match() returns either NULL (no value) or an array of matches (which can be accessed using RegExp.$1, RegExp.$2, ..).

When you use welcome[b].innerHTML == 'value', you are asking if the innerHTML of the TD is exactly equal to value. If this is true, TRUE is returned. If not, FALSE is returned. If FALSE is returned, the if() statement won't pass because it's not TRUE.

You should use this as a RegExp cheat sheet after you learn the basics: www.addedbytes.com/download/regular-expressions-cheat-sheet-v2/png/