How to wrap a function around the signature pads

[TP-Harry-Phillips]

What I am trying to achieve:

1. Have multiple empty divs on the page
2. Have a JS function that turns those divs into signature pads
3. Within the div are buttons that clear the pad and another that saves the content

I have been able to achieve 1 and 2 here:
https://codesandbox.io/s/youthful-torvalds-eshp7d?file=/js/signPadApp.js

I can't figure out how to do number 3.

First is the function initSignaturePad, this creates all the bits I want and adds them to the empty div, this works fine.

Next are the functions clearPad and readAsSVG, these accept an ID as a parameter. What I want them to do is select the appropriate pad and clear / save it. I don't know enough about JS to get it to work.

Is creating functions the correct way to achieve my goal?

I also can't figure out how to calculate the ratio and clear the pad on window resize either.

[UziTech]

instead of an onclick attribute you should be adding a listener to the click event

- v_clearButton.setAttribute("onclick", 'clearPad("' + vp_DivID + '");');
+ v_clearButton.addEventListener("click", () => { v_signaturePad.clear(); });

and similar with the v_saveButton

[TP-Harry-Phillips]

That works, in the sandbox, but it does not work on my test page.

I know there are differences in the sandbox and the test page such as the line:
import SignaturePad from "signature_pad";

I had to make those differences to get the sandbox to work, I did not think they would make a significant difference to the functionality of the code working or not working.

I changed that top line to:
import SignaturePad from "./signature_pad.umd.js";

In the sandbox that line works just fine, on my test page I am told that:
import declarations may only appear at top level of a module

I checked the error and all I found was pages that said if you want to import a function or class the source file needs to use:
export class blahblahblah {

signature_pad.umd.js does not have any exporting so I am pretty sure that the sandbox environment is doing some magic to make it work. I am stuck now, the sandbox only works because it adds something in the background and my own pages do not have that missing piece.

[TP-Harry-Phillips]

Ok , I just inspected the elements in the sandbox and the test page and found this:

Sandbox clear button:

Test page clear button:

[TP-Harry-Phillips]

Nope not it, the test page now looks like this and left clear button still clears the right pad

:

[TP-Harry-Phillips]

When I add this line:
console.log(v_signaturePad);

This is what I get from clicking the left and right clear buttons:

Somehow the sandbox system keeps the two objects separate but my test page does not:

[UziTech]

You can check out our example at https://github.com/szimek/signature_pad/blob/master/docs/js/app.js. I suggest reading up on closures.

[TP-Harry-Phillips]

Ah ha! After looking at your example page again I figured out that in the function initSignaturePad I simply needed to use const at the front of the line:
v_signaturePad = new SignaturePad(v_canvas, {backgroundColor: "rgb(0, 0, 0, 0)"});

Now all the buttons reference the correct object.