将内联Javascript中的变量传递到单独文件中的单击处理程序

Question

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?

Answer 1

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.

Answer 2

Can you try adding this right under your clearButton line? Also, maybe change send-signature to an addListener format and see if that changes anything.

$('.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;
    } 

} );