[SOLVED] Passing variable from inline Javascript to click handler in separate file

Passing variable from inline Javascript to click handler in separate file

I have some inline javascript for using Signature Pad https://github.com/szimek/signature_pad It looks like this:

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});
clearButton.addEventListener("click", function (event) {
  signaturePad.clear();
});

And in the footer i have a separate file included click.js

$('.send-signature').on( 'click', function( event ) {
        event.preventDefault();
        console.log(event);
        var $button = $(this);
        $button.prop("disabled",true);
        if (signaturePad.isEmpty()) {
            alert("Please provide a signature first.");
            return false;
        } 

} );

When I am clicking the button i get: Uncaught ReferenceError: signaturePad is not defined

If I click the clearbutton button, it works fine. I can't understand what the problem is and how i should pass the signaturePad to the click handler.

Click.js is included below the inline javascript.

I have tried a lot of different solutions but i think this is the furthest i have come. Can somebody point me in the right direction and say why this is not working?

Solution

You could save the signaturePad variable in the window object

window.signaturePad = new...

and then access it the same way

window.signaturePad.isEmpty()

this is not the most beautiful way of doing javascript, but I think it's OK for your purpose.