CODEWITHSUNDEEP
javascripthtml
vinaya
vinaya

Reputation: 272

scope of variables in javascript - if a variable is declared before a for loop, shouldn't its value be accessible after the for loop?

I am declaring some variables in a function and their values get updated within the for loop. At the end of the function I want to see the final values of some of these variables.

After spending a whole day on why what I want is not happening, I am posting the function here to get some insight.

In the function you can see two alerts - the first runs with each iteration of the for and gives me the current values of the variables. I do not want this alert but have inserted it here just to show that the code does actually do what I want it to do within the for loop.

What I want is only the last alert.... BUT for some reason it never appears!

As I understand it, if a variable has been declared at the beginning of a function, its value can be accessed right up till the end... If this is correct, why does the last alert not appear?

NOTE: This code is being run on a MsWord generated html, which contains innumerable unnecessary span tags that I need to remove before I can use the contents for documentation purposes. Not being able to get these values is what is preventing me from finalizing a small tool I plan to use to convert about 400 MsWord pages for a project!

function uponetag()
{
    var spank=document.getElementsByTagName('span'); //look at all span tags
    var spann=spank.length; //number of span tags on the page
    var yes=0;
    var no=0;

    for (i=0; i<=spann; i++)
        {

            var spancont=spank[i].innerHTML;
            //get the parent node
            var outer = spank[i].parentNode;
            outertag=outer.tagName.toLowerCase();

            //get the inner html of the parent node
            var outercont=outer.innerHTML;
            //create a string manually placing the opening and closing span tags around the current span content
            var compareit=("<span>"+spancont+"</span>");

            //compare the manual string to inner content of the parent node
            if (outercont===compareit)
            {

                //replace the inner html of the parent node with the current span content
                outer.innerHTML=spancont;
                yes=yes+1;
            }

            else
            {
                no=no+1;
            }
            alert ("Converted = "+yes+"\n\n Not converted = "+no); //this alert works
        }
    alert ("The page originally had "+spann+" span tags. \n ON EXIT: Converted = "+yes+"\n\n Not converted = "+no);
    //THIS ALERT DOESN'T!!! WHY?????
}

I have tried all the changes (i=spannum, var1=.... etc) suggested here without any success! In fact, while doing this, I found that though there are 49 spans in the original page, the script throws the error in the firebug console after 29 runs (20 yeses and 9 nos).

Upvotes: 0

Views: 61

Answers (2)

Tuhin
Tuhin

Reputation: 3373

for (i=0; i<=spann; i++)
//change it to :
for (i=0; i<spann; i++)

Upvotes: 0

Paul
Paul

Reputation: 27433

The code read beyond the length of the array, causing an error.

That's why the loop alerts fire but the final alert outside the loop does not fire.

This loop

for (i=0; i<=spann; i++)

includes i=spann, which is 1 beyond the end.

I think you meant to use

for(i=0;i<spann;i++)

which is correct.

I should also note that Javascript does not have block-level variables. It has function-scoped variables. Declaring a var in a for loop block is the same as declaring the var at the initialization of the current function (called hoisting) and setting it in the loop.

Upvotes: 4

Related Questions