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()
?