Variable is not defined outside of the function

Question

Can someone please help me with this? I am new and I debugged and tried several codes while executing my codes. I'm trying to pass a base64string into JotForms that will allow me to generate my image into their PDF. Here is my the error screenshot. Error here

And this is the code I am having trouble with, this is my function.

 function screenshot() {
    html2canvas(document.body, {
        scrollY: -window.scrollY,
        crossOrigin : 'Anonymous',
        allowTaint: true,
        foreignObjectRendering: true, 
    }).then(function (canvas) {
        document.body.appendChild(canvas);
        var data0101 = document.body.appendChild(canvas).toDataURL();
        console.log('Result', data0101)
        document.body.removeChild(canvas);
    });
}

and this is the JotForm code that is outside the function,

var myImage = data0101;
console.log(myImage)
var submissionData = {
    valid: true,
    value: JFCustomWidgetUtils.buildMetadata('imagelinks', [{
        'name': "Data from Widget",
        'base64': myImage
    }])
}
JFCustomWidget.subscribe('ready', function (data333333) {
    console.log("ready message arrived from JotForm", data333333);
    JFCustomWidget.sendData(submissionData);//Do this as soon as your image is ready
    JFCustomWidget.sendsubmit(submissionData);//This will run when the submit button is clicked
});

Thank you so much

Answer 1

You declare your data0101 variable inside the funcion. This means you can only use it inside your function. Once you leave this function, this variable no longer available. Thats why you are getting this error.

To solve this you can declare you variable before this function as a global variable. Something like:

 var data0101 = null;
 function screenshot() {
    html2canvas(document.body, {
        scrollY: -window.scrollY,
        crossOrigin : 'Anonymous',
        allowTaint: true,
        foreignObjectRendering: true, 
    }).then(function (canvas) {
        document.body.appendChild(canvas);
        data0101 = document.body.appendChild(canvas).toDataURL();
        console.log('Result', data0101)
        document.body.removeChild(canvas);
    });