變量在 javascript 中突然切換到未定義

Question

我標記了第三個console.log - “console.log(elements[i])”。 那時，elements[i] 是未定義的，但在此之前它的行為與預期一樣。 任何想法如何/為什么會發生這種情況？

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

您在兩個函數中都使用了全局變量i ，因此get_all_tasks_within_div()中的for循環更改了create_exhibits_list()中的變量i 。 因此，當您在調用 function 后使用elements[i]時， i已更改為elements數組中不存在的索引。

除非您特別需要使用全局變量，否則您應該始終使用var或let將變量聲明為局部變量。