Variable is suddenly switching to undefined in javascript

Question

I marked the third console.log - "console.log(elements[i])". At that point, elements[i] is undefined, but before then it behaves as expected. Any ideas how/why this is happening?

function get_all_tasks_within_div(div_id) {
  var options = []
  var checked_options = []
  var elements = document.getElementById(div_id).querySelectorAll('*');
  for (i = 0; i < elements.length; i++) {
    if (elements[i].getAttribute("name") == "task") {
      options.push(elements[i].value)
      if (elements[i].checked == true) {
        checked_options.push(elements[i].value)
      }
    }
  }
  return [options, checked_options]
}

function create_exhibits_list(deliverable_id) {
  exhibits[deliverable_id] = []
  var elements = document.getElementsByName("exhibit")
  //get all exibits and sort
  for (i = 0; i < elements.length; i++) {
    try {
      console.log(elements[i])
      var element_id = elements[i].id;
      var exhibit_number = document.getElementById(element_id + "exhibit_number").value;
      var exhibit_name = document.getElementById(element_id + "exhibit_name").value;
      var responsible_party = document.getElementById(element_id + "responsible_party").value;
      var deliverable_type = document.getElementById(element_id + "type").value;
      var deliverable_type_options = Array.apply(null, document.getElementById(element_id + "type").options).map(function(el) {
        return el.value;
      });
      var responsible_party_options = Array.apply(null, document.getElementById(element_id + "responsible_party").options).map(function(el) {
        return el.value;
      });
      console.log(elements[i])
      var task_data = get_all_tasks_within_div(element_id + "tasks");

      console.log(elements[i]) // *****

      var task_options = task_data[0]
      var task_checked_options = task_data[1]
      exhibits[deliverable_id].push({
        'exhibit_number': exhibit_number,
        'exhibit_name': exhibit_name,
        'responsible_party': responsible_party,
        'deliverable_type': deliverable_type,
        'deliverable_type_options': deliverable_type_options,
        'responsible_party_options': responsible_party_options,
        'task_options': task_options,
        'task_checked_options': task_checked_options,
        'exhibit_id': element_id,
        'exhibit_int': parseInt(element_id.replace(deliverable_id + "exhibit", ""), 10)
      })
    } catch (err) {
      console.log(err)
    }
  }

Answer 1

You use the global variable i in both functions, so the for loop in get_all_tasks_within_div() changes the variable i in create_exhibits_list() . So when you use elements[i] after calling the function, i has changed to a nonexistent index in the elements array.

You should always declare variables to be local with var or let unless you specifically need to use a global variable.