Javascript scope (or something) issue

I have this fragment of Javascript. I need the variable highest_number later in the function and I can it generate fine. The problem is that highest_number seems to be unaccessable once the for loop ends (e.g after the closing } ).

function new_route(parts) {
    var highest_number = -1;

    alert(parts);
    if (parts[0] == "field") {} 
    else if (parts[0] == "option") {
        //find last option input id
        var select_container = "container_" + parts[2];
        var thisContainer = document.getElementById(select_container);
        var optionsList = thisContainer.getElementsByTagName("input");

        for 开发者_如何学编程(var i = 0; i < optionsList.length; i++) {
            var option_parts = optionsList[i].getAttribute("id").split("_");

            if (option_parts[0] == "option") {
                alert(option_parts);
                if (option_parts[2] > highest_number) {
                    highest_number = option_parts[2];
                }
            }
        }
        alert(highest_number);

        var labelNode = document.createElement("label");
        var inputNode = document.createElement("input");
    }
}

Why is this happening?

You didn't provide all relevant information in the question, so I'm working from your question from the other day.

At least part of the issue is with getElementsByTagName('input') because it is including the submit button which doesn't have an ID.

So when you get to:

var option_parts = optionsList[i].getAttribute("id").split("_");

You're trying to do a .split() on null.

If you exclude elements in the loop that don't have an ID, it will work:

    for (var i = 0; i < optionsList.length; i++) {
             // if no ID, continue to the next item
        if( !optionsList[i].id ) continue;
        var option_parts = optionsList[i].getAttribute("id").split("_");

Side note. Please include relevant information in the question. It saves everyone time.

Here's a jsFiddle of your code in action. It is updated from the fiddle I posted before. You may want to utilize it if you have future questions regarding this code.

When you get the "option_parts", you're getting an array of strings. You should make sure that you explicitly convert to integer there (well, to numbers). The comparison will be done as a numeric comparison on the first iteration, but as soon as you set "highest_number" to "option_parts[2]", then it'll be a string too.

What you could do is this:

   // ...
   var option_parts = optionsList[i].getAttribute("id").split("_");
   if (option_parts[0] === "option") {
     var index = parseInt(option_parts[2], 10); //  <----- the important thing
     if (index > highest_number)
       highest_number = index;
   }

The alert box is in the arm of the else statement. Try moving it to the real end of the function

function new_route (parts) {
  var highest_number = -1;

  alert (parts);
  if (parts[0] == "field") {
    } else if (parts[0] == "option") {
      //find last option input id
      var select_container = "container_"+parts[2];
      var thisContainer = document.getElementById (select_container);
      var optionsList = thisContainer.getElementsByTagName ("input");

      for (var i = 0; i< optionsList.length; i++) {
        var option_parts = optionsList[i].getAttribute("id").split("_");

        if (option_parts[0] == "option") {
          alert (option_parts);
          if (option_parts[2] > highest_number) {
            highest_number = option_parts[2];
          }
        }
      }
      alert (highest_number);

      var labelNode = document.createElement ("label");
      var inputNode = document.createElement ("input");
    }
    alert (highest_number); // Add Alert here!
  }

Execution will stop if a named element is searched for but can't be found. Double check (use alerts) that the right element id is being searched for using document.getElementById

  var thisContainer = document.getElementById (select_container);

Check that select_container is what you expect.