Having trouble getting expected behavior from click event in module pattern

So I do not have a lot of experiencing working on event handlers within the JavaScript module pattern.

There is this implementation that does what it is supposed to do:

//= require templates/modules/dvic_card_gallery
//=require templates/modals/dvic_modal_card_gallery

(function(exports) {
  'use strict';

  var Grill = exports.Grill,
    Whiskers = exports.Whiskers,
    $ = exports.$;

  // itialize the modal gallery's initial card to the sorcerer
  var selectedCardInstantCredit = 'card-sorcerer';


  var ModalCardGallery = Grill.ModuleView.extend({
    style_classes: ['modal_card_gallery'],
    template: Whiskers.modules.dvic_card_gallery,
    initialize: function() {
      exports.console.log('The Card Gallery module is initialized');
    },

    events: {
      'click .view-full-gallery': 'onClickLink',
      'click .sp-thumbnail': 'onClickThumbnail',
      'click .sp-forward': 'onClickForwardChevron',
      'click .sp-backward': 'onClickBackwardChevron'
    },
    onClickLink: function(e) {
      e.preventDefault();
      var modalConfig = {
        template: Whiskers.modals.dvic_modal_card_gallery,
        name: 'full-gallery',
        ctx_additions: this.ctx_additions(),
        linkEl: [e.target]
      };

      if (this.modal === undefined) {
        this.modal = new Grill.FullGalleryModalView(modalConfig);
        this.modal.show();
      } else {
        // if the modal has already been created and closed, reopen it
        this.modal.show();
      }
    },

    onClickThumbnail: function(e) {
      e.preventDefault();
      this.$clickedEl = $(e.currentTarget);

      // Tells us what card was clicked.
      var clickedCard =  this.$clickedEl.data("action").trim();
      selectedCardInstantCredit = clickedCard;

      // Hide all , then show what was clicked.
      $(".sp-slides .sp-slide").hide();
      $(".sp-slides .sp-slide." + clickedCard).show();
    },

    onClickForwardChevron: function(e) {
      e.preventDefault();
      galleryButtonClick(selectedCardInstantCredit, "forward");
    },

    onClickBackwardChevron: function(e) {
      e.preventDefault();
      galleryButtonClick(selectedCardInstantCredit, "backward");
    },

    render: function() {
      this.$el.html(this.template.render(this.model));
    }

  });

//==========================
  // Helpers
  //==========================
  var galleryButtonClick = function (cardName, direction) {
    // this array must match the card order in the template
    var cardsArray = [
      'card-sorcerer',
      'card-th',
      'card-frozen',
      'card-yoda',
      'card-pixie',
      'card-bb8',
      'card-tinker',
      'card-spotlight',
      'card-pals',
      'card-vader'
    ];
    var index = cardsArray.indexOf(cardName);

    $('.sp-slides .sp-slide').hide();

    // get the card to show
    if (direction === 'forward' && index === cardsArray.length -1) {
      selectedCardInstantCredit = cardsArray[0];
      $('.thumbnail-container').css("left", "150%");
    } else if (direction === 'forward') {
      selectedCardInstantCredit = cardsArray[index + 1];
    } else if (direction === 'backward' && index === 0) {
      selectedCardInstantCredit = cardsArray[cardsArray.length - 1];
    } else if (direction === 'backward') {
      selectedCardInstantCredit = cardsArray[index - 1];
    }

    $('.sp-slides .sp-slide.' + selectedCardInstantCredit).show();
  };

  ModalCardGallery.register('dvic_card_gallery', {});
})(this);

but I am trying to console log here:

onClickForwardChevron: function(e) {
          e.preventDefault();
          exports.console.log('is this working?');
          galleryButtonClick(selectedCardInstantCredit, "forward");
        },

but I don't get the message logged to console. So I am not sure now how to test this event so I can start adding an implementation I have been wanting to add.

I have also tried by adding an event in the if conditional in the helper section of this file:

if (direction === 'forward' && index === cardsArray.length -1) {
      selectedCardInstantCredit = cardsArray[0];
      $('.thumbnail-container').css("left", "150%");

This is not working but the idea is to get the thumbnail container as a whole to move left as the user keeps clicking the chevron forward.

Here is the html file:

<button class="sp-backward"></button>
          <div class="sp-slides">
            <div class="sp-slide card-sorcerer"><div role="img" aria-label="The Sorcerer Mickey card" class="card-image"></div><div class="card-title" aria-hidden="true">Sorcerer Mickey</div></div>
            <div class="sp-slide card-th"><div role="img" aria-label="The Diamond Celebration (2015-2016) card" class="card-image"></div><div class="card-title" aria-hidden="true">Diamond Celebration<br/>(2015-2016)</div></div>
            <div class="sp-slide card-frozen"><div role="img" aria-label="The Frozen card" class="card-image"></div><div class="card-title" aria-hidden="true">Frozen</div></div>
            <div class="sp-slide card-yoda"><div role="img" aria-label="The Yoda card" class="card-image"></div><div class="card-title" aria-hidden="true">Yoda</div></div>
            <div class="sp-slide card-pixie"><div role="img" aria-label="The Pixie Dust card" class="card-image"></div><div class="card-title" aria-hidden="true">Pixie Dust</div></div>
            <div class="sp-slide card-bb8"><div role="img" aria-label="The BB-8 card" class="card-image"></div><div class="card-title" aria-hidden="true">BB-8</div></div>
            <div class="sp-slide card-tinker"><div role="img" aria-label="The Tink card" class="card-image"></div><div class="card-title" aria-hidden="true">Tink</div></div>
            <div class="sp-slide card-spotlight"><div role="img" aria-label="The Spotlight card" class="card-image"></div><div class="card-title" aria-hidden="true">Spotlight</div></div>
            <div class="sp-slide card-pals"><div role="img" aria-label="The Mickey and Pals card" class="card-image"></div><div class="card-title" aria-hidden="true">Mickey & Pals</div></div>
            <div class="sp-slide card-vader"><div role="img" aria-label="The Darth Vader card" class="card-image"></div><div class="card-title" aria-hidden="true">Darth Vader</div></div>
          </div>
          <button class="sp-forward"/></button>
        </div>
        <div class="thumbnail-container">
          <button class="sp-thumbnail sorcerer ada-el-focus" data-action="card-sorcerer" title="View the Sorcerer Mickey card"></button>
          <button class="sp-thumbnail th ada-el-focus" data-action="card-th" title="View the Diamond Celebration card" id="box1"></button>
          <button class="sp-thumbnail frozen ada-el-focus" data-action="card-frozen" title="View the Frozen card" id="box2"></button>
          <button class="sp-thumbnail yoda ada-el-focus" data-action="card-yoda" title="View the Yoda card" id="box3"></button>
          <button class="sp-thumbnail pixie ada-el-focus" data-action="card-pixie" title="View the Pixie Dust card"></button>
          <button class="sp-thumbnail bb8 ada-el-focus" data-action="card-bb8" title="View the BB-8 card"></button>
          <button class="sp-thumbnail tinker ada-el-focus" data-action="card-tinker" title="View the Tink card"></button>
          <button class="sp-thumbnail spotlight ada-el-focus" data-action="card-spotlight" title="View the Spotlight card"></button>
          <button class="sp-thumbnail pals ada-el-focus" data-action="card-pals" title="View the Mickey and Pals card"></button>
          <button class="sp-thumbnail vader ada-el-focus" data-action="card-vader" title="View the Darth Vader card"></button>
        </div>
      </div>

Its scope, so in your code you reference both modal views and then ModuleView. This looks like Backbone and I had the same issue. Not sure your level of experience with, but if you have a modal that opens then you want to have both this: var ModalCardGallery = Grill.ModuleView.extend for the module page and then this: var ModalCardGallery = Grill.ModalView.extend for the modal view as some of your events are in module view and others in modal view. Speaking of which, separate those events out as well.