Passing variable from inline Javascript to click handler in separate file

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?

If `var signaturePad` is inside a load event handler, it will not be in scope outside. Try declaring `var signaturePad` outside all script and then change to `signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgb(255, 255, 255)' });` where you have var now — mplungjan, Sep 18 '19 at 17:46

score 0 · Accepted Answer · answered Sep 18 '19 at 17:47

0

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.

answered Sep 18 '19 at 17:47

Simon

288
2
6

Thank you, works perfectly! Now I'm just curious why it doesn't work without this, do you have any idea? – E-g Sep 19 '19 at 07:10

score 0 · Answer 2 · answered Sep 18 '19 at 17:55

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;
    } 

} );

Passing variable from inline Javascript to click handler in separate file

2 Answers2