Javascript for loop should loop twice, why only once?

Question

I have the weirdest issue, I have a loop below that should loop twice (it should loop the same amount as there are textarea elements in a block of HTML, so 2) but instead it only loops once?

Why do you think this is happening?

  // This is the test HTML that should make the loop further below loop twice
  <div class="inputPanel">  
     <div class="a"> 
     <p class="label">Staff Link</p> 
     <textarea class="updatable~p"> abcdef </textarea>    
     <p> blah blah </p>
     <div class="b"> defgh </div>
     <p class="label">Staff Info</p>
     <textarea class="updatable~p"> erdeffde </textarea>
     <div class="footer"> end </div>
  </div>


function convertToDisplayHTML( str )
{
    try
    {
                       // Algorithm:
        // get all code from iframe 
        // extract all textarea elements
        // if textarea[i].class.match( "updable" )
        /* {
              var eleType = textarea[i].class.split("~");
              eleType     = eleType[ eleType.length-1 ];
              change elements type to eleType
              change elements value to textareas value
           }

           delete all elements that are <p>'s & have the class="label"

           return string
        */

        var textareas = document.getElementById("inputPanel").getElementsByTagName("textarea");
        var labels    = getElementsByClassName( "label", document.getElementById("inputPanel") );
        alert(textareas.length);  // says "2"

                       // THIS IS THE LOOP: it should loop 2 times not 1
        for ( var i=0; i<textareas.length; i++ )
        {
            alert("Loop 1 " + textareas[i].className);
            if ( textareas[i].className.match( "updatable" ) )
            {
                var className = "";
                var eleType   = textareas[i].className.split( "~" );
                eleType       = eleType[ eleType.length-1 ];

                if ( labels.length > 0 )
                {
                    var className = "updater~"+labels[0].innerHTML;
                    labels[0].parentNode.removeChild( labels[0] );
                    labels.shift();
                }

                var newObj  = changeObjectType( textareas[i], eleType, className );
            }
            alert("A");
        }

        return document.getElementById("inputPanel").innerHTML;
    }
    catch (ex)
    {
        alert("In convertToDisplayHTML(): "+ex);
        return "FAILED";
    }
}

Did you try alerting `textareas.length`? It shouldn't be too hard to debug. Maybe an exit condition is kicking in? — JohnP, May 26 '11 at 07:03
for one, the `~` char is not allowed in a class name. http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — Gabriele Petrioli, May 26 '11 at 07:06
btw, getElementById("inputPanel")? your inputPanel div has a class, not an id — corroded, May 26 '11 at 07:06

score 1 · Answer 1 · answered May 26 '11 at 07:06

1

labels don't have a function called shift.

That's where I'm getting an error. Commenting that out (and the call to changeObjectType which you haven't defined, solves the problem for me.

answered May 26 '11 at 07:06

David Hedlund

128,221
31
203
222

Javascript for loop should loop twice, why only once?

1 Answers1