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

You would have to make the variable global or the value accessable globally or put the functionality that relies on it in the same scope. One way would be using `window.data0101 = ` instead of `var data0101 =`. — JavaScript, Sep 30 '22 at 06:29
Hello @JavaScript, it is still undefined under the code, var myImage = data0101; and when changing it also to window.data0101, the console says it is undefined — RottenPotatoes, Sep 30 '22 at 06:33
That suggests you calling the second part of the posted code before the first one is finished. Why not just add the second part below `document.body.removeChild(canvas);` inside the `then` block? — JavaScript, Sep 30 '22 at 07:09
Hello @JavaScript, i tried it but it seems when pasting it inside it do not work — RottenPotatoes, Sep 30 '22 at 08:42

Frigyes Vass · Answer 1 · 2022-09-30T06:38:57.533

0

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

edited Sep 30 '22 at 06:38

answered Sep 30 '22 at 06:35

Frigyes Vass

139
1
4
17

Hello @Frigyes, when I tried it outside the function on myImage, and doing console.log it says null, it do not get the base64string – RottenPotatoes Sep 30 '22 at 06:36
Hello @Frigyes, when I tried it outside the function on myImage, and doing console.log it says null, it do not get the base64string – RottenPotatoes Sep 30 '22 at 06:41
@RottenPotatoes You can use a second variable, but no you cannot use any variable if it is not in the same parent block of code. You use data0101 inside your code, you can't use it globally. – KOMODO Sep 30 '22 at 06:41
Hello @KOMODO, is there a possible way to get this data0101 = document.body.appendChild(canvas).toDataURL();? and insert it outside the function? – RottenPotatoes Sep 30 '22 at 06:43
I do not understand what you want to do? you can send data0101 to any function as parameter. – KOMODO Sep 30 '22 at 06:52
Hello @KOMODO, in my second line of code with var myImage = data0101, it is reading as null because var data0101 = null; right? But i want that myImage to be what is inside here, data0101 = document.body.appendChild(canvas).toDataURL(); – RottenPotatoes Sep 30 '22 at 07:01
Where do you call your **screenshot()** function? The order is very important. `var data0101 = null;` `screenshot();` `var myImage = data0101;` Also can you tell me what `document.body.appendChild(canvas).toDataURL();` gives back? Can you log it to me? It seems wrong. – Frigyes Vass Sep 30 '22 at 07:10
Hello @Frigyes, this code document.body.appendChild(canvas).toDataURL(); it converts the image jpeg or png to base64strings, Even doing the orders, it still null. – RottenPotatoes Sep 30 '22 at 07:17
It seems wrong to me. This should be `data0101=canvas.toDataURL();` Also you need to call your **screenshot()** function. Otherwise **data0101** will remain **null**. I already told you the right order. Maybe this will help too: https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl – Frigyes Vass Sep 30 '22 at 07:25
because i have a trigger button that will screen capture the entire html, can i change it to data0101=canvas.toDataURL()? @FrigyesVass – RottenPotatoes Sep 30 '22 at 07:27
@FrigyesVass i tried doing it, still it do not get what is inside data0101 – RottenPotatoes Sep 30 '22 at 07:30
Can you upload all the code here somehow? – Frigyes Vass Sep 30 '22 at 12:45
@FrigyesVass here is the code link. tm7.net.au – RottenPotatoes Oct 03 '22 at 00:21
Hello @FrigyesVass is there any way to do it? – RottenPotatoes Oct 06 '22 at 02:28

Variable is not defined outside of the function

1 Answers1