I have various functions in this script I am doing, but one of them is not being called despite the two functions knowing about each-other (not a scope issue) and the event listener firing.
I have an input range element with two event listeners, as per this:
onchange event on input type=range is not triggering in firefox while dragging
My code is like this:
function initZoom() {
  var self = this,
  wrap = self.elements.zoomerWrap = document.createElement('div'),
  zoomer = self.elements.zoomer = document.createElement('input');
  self.elements.viewBox.insertAdjacentElement('afterend',wrap);
  wrap.appendChild(zoomer);
  function change() {
    console.log("Fire Before On Zoom!");
    onZoom.call(self, {
      value: parseFloat(zoomer.value),
      origin: new TransformOrigin(self.elements.img),
      viewportRect: self.elements.enclosedCrop.getBoundingClientRect(),
      transform: Transform.parse(self.elements.img)
    });
  }
  self.elements.zoomer.addEventListener('input', change); // this is being fired twice on keypress
  self.elements.zoomer.addEventListener('change', change);
}
As you can see I have the two elements (wrap and zoomer) added to the DOM. This is working, and I also have the two event listeners, which are also working. That is, when I manipulate the range input, I get Fire Before On Zoom! printed to the console.
However, my onZoom call never seems to fire. I have it here:
function onZoom(ui) {
        console.log("Fire Before Apply CSS!");
 }
That console.log() never prints to the console, and further code in that function never executes. If I put the first console.log() behind the onZoom.call() it never prints either. If I add , onZoom to console.log("Fire Before On Zoom!") it prints the function body of onZoom so it knows it exists...
So what is wrong with my onZoom.call()?
