Not able to resolve the uncaught reference error

Question

I'm designing a web page and facing uncaught reference error: 'draw_images' is not defined. However I have defined this function already. I think the error is because of the programming scope. I'm a beginner in this field. I tried to change it to some extent but couldn't be successful.

var similar_images = []
var total_images = []
var attributes = []

$('body').template({
  data: {}
})

$('body').on('click', '.preview', function(o) {
  image = o.currentTarget.src.split('/').slice(-1)[0]
  similar_images.push(image)
  total_images = _.remove(total_images, function(x) {
    return x !== image
  })
  
  $('body').template({
    data: {
      similar: similar_images,
      total: total_images
    }
  })
}).on('click', '.attributes', function(o) {
  $(this).toggleClass('btn-danger')
  value = $(this).data().attributes
  ind = attributes.indexOf(value)
  if (ind != -1) {
    attributes[ind] = attributes[-1]
    attributes.pop()
  } else
    attributes.push(value)
}).on('click', '.attr', function() {
  $.ajax('labelled_images', {
    method: 'POST',
    data: {
      attributes: attributes
    }
  })
}).done(draw_images)

$('.submit').on('click', function() {
  $.ajax('labelled_images', {
    method: 'POST',
    data: {
      similar: similar_images,
      dissimilar: total_images
    }
  }).done(draw_images)
  $('body').on('click', '.init', function() {
    $.get('init').done(function() {
      window.location = './'
    })
  })

  function draw_images(data) {
    total_images = JSON.parse(data)
    console.log(total_images)
    similar_images = []
    $('body').template({
      data: {
        best_image_url: total_images[0],
        similar: similar_images,
        total: total_images
      }
    })
  }
})

Answer 1

var similar_images = []
var total_images = []
var attributes = []

$('body').on('click', '.preview', function(o) {
  image = o.currentTarget.src.split('/').slice(-1)[0]
  similar_images.push(image)
  total_images = _.remove(total_images, function(x) {
    return x !== image
  })
  
  $('body').template({
    data: {
      similar: similar_images,
      total: total_images
    }
  })
}).on('click', '.attributes', function(o) {
  $(this).toggleClass('btn-danger')
  value = $(this).data().attributes
  ind = attributes.indexOf(value)
  if (ind != -1) {
    attributes[ind] = attributes[-1]
    attributes.pop()
  } else
    attributes.push(value)
}).on('click', '.attr', function() {
  $.ajax('labelled_images', {
    method: 'POST',
    data: {
      attributes: attributes
    }
  }).done(draw_images)
})

$('.submit').on('click', function() {
  $.ajax('labelled_images', {
    method: 'POST',
    data: {
      similar: similar_images,
      dissimilar: total_images
    }
  }).done(draw_images)
  $('body').on('click', '.init', function() {
    $.get('init').done(function() {
      window.location = './'
    })
  })
})

function draw_images(data) {
  total_images = JSON.parse(data)
  console.log(total_images)
  similar_images = []
  $('body').template({
    data: {
      best_image_url: total_images[0],
      similar: similar_images,
      total: total_images
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

the draw_images function was declared inside $('.submit').on('click', function() {...} and also .done is available only for ajax and other promises.

Update: Please attach events to particular elements instead of the whole body. Something like this $(".preview").click(function(event) {...}).

Answer 2

You're function is in the wrong scope. I put the correct order below. The function doesn't exist in your clauses

<script>
    var similar_images = []
    var total_images = []
    var attributes = []
    $('body').template({ data: {} })
    // $.get('labelled_images').done(function (images) {
    //   total_images = JSON.parse(images)
    //   console.log(total_images)
    //   $('body').template({
    //     data: {
    //       total: total_images,
    //       similar: similar_images,
    //     }
    //   })
    // })
    $('body').on('click', '.preview', function (o) {
      image = o.currentTarget.src.split('/').slice(-1)[0]
      similar_images.push(image)
      total_images = _.remove(total_images, function (x) { return x !== image })
      $('body').template({
        data: {
          similar: similar_images,
          total: total_images
        }
      })
    }).on('click', '.attributes', function (o) {
      $(this).toggleClass('btn-danger')
      value = $(this).data().attributes
      ind = attributes.indexOf(value)
      if (ind != -1) {
        attributes[ind] = attributes[-1]
        attributes.pop()
      }
      else
        attributes.push(value)
    }).on('click', '.attr', function () {
      $.ajax('labelled_images', {
        method: 'POST',
        data: {
          attributes: attributes
        }
      })
    }).done(draw_images)
    $('.submit').on('click', function () {
      $.ajax('labelled_images', {
        method: 'POST',
        data: {
          similar: similar_images,
          dissimilar: total_images
        }
      }).done(draw_images)
      $('body').on('click', '.init', function () {
        $.get('init').done(function () { window.location = './' })
      })
})

function draw_images(data) {
    total_images = JSON.parse(data)
    console.log(total_images)
    similar_images = []
    $('body').template({
      data: {
        best_image_url: total_images[0],
        similar: similar_images,
        total: total_images
      }
    })
  }
  </script>