How: External Variables For Javascript

It shouldn’t break by enqueing it, for example jQuery is still defined even if you load a script separately after it.

Can you link to a page with the issue and outline that issue more?

You bet. Here’s the page:
Custom Colors

As described on that page, the user chooses 2 colors from 2 color pickers, then clicks on the 2 buttons to make the wall color, then the art color, change according to their chosen colors. This all worked perfectly with the code in the page body.

Two of the functions, getWallPixels() and getArtPixels() are triggered onload in the image tags. The buttons fire onclick events for changeWallColor() and changeArtColor() functions. The color-changing code is here:

var artWall = document.getElementById("wall-color");
            var artOnly = document.getElementById("art-color");
            var canvas = document.createElement("canvas");
            var canvas2 = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var ctx2 = canvas2.getContext("2d");
            var originalPixels = null;
            var currentPixels = null;
            var originalPixels2 = null;
            var currentPixels2 = null;
            var test = "bear";

            function getWallPixels(img)
            {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                originalPixels = ctx.getImageData(0, 0, img.width, img.height);
                currentPixels = ctx.getImageData(0, 0, img.width, img.height);

                img.onload = null;
            }

            function getArtPixels(img)
            {
                canvas2.width = img.width;
                canvas2.height = img.height;

                ctx2.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                originalPixels2 = ctx2.getImageData(0, 0, img.width, img.height);
                currentPixels2 = ctx2.getImageData(0, 0, img.width, img.height);

                img.onload = null;
            }

            function hexToRGB(hex)
            {
                var long = parseInt(hex.replace(/^#/, ""), 16);
                return {
                    R: (long >>> 16) & 0xff,
                    G: (long >>> 8) & 0xff,
                    B: long & 0xff
                };
            }            

              function changeWallColor()
                {
                    if(!originalPixels) return; // Check if image has loaded
                    var newColor = hexToRGB(document.getElementsByTagName("INPUT")[0].value);

                    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
                    {
                        if(currentPixels.data[I + 3] > 0) // If it is not a transparent pixel
                        {
                            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                        }
                    }

                    ctx.putImageData(currentPixels, 0, 0);
                    artWall.src = canvas.toDataURL("image/png");
                }

                function changeArtColor()
                {
                    if(!originalPixels2) return; // Check if image has loaded
                    var newColor = hexToRGB(document.getElementsByTagName("INPUT")[1].value);

                    for(var I = 0, L = originalPixels2.data.length; I < L; I += 4)
                    {
                        if(currentPixels2.data[I + 3] > 0) // If it is not a transparent pixel
                        {
                            currentPixels2.data[I] = originalPixels2.data[I] / 255 * newColor.R;
                            currentPixels2.data[I + 1] = originalPixels2.data[I + 1] / 255 * newColor.G;
                            currentPixels2.data[I + 2] = originalPixels2.data[I + 2] / 255 * newColor.B;
                        }
                    }

                    ctx2.putImageData(currentPixels2, 0, 0);
                    artOnly.src = canvas2.toDataURL("image/png");
                }

Thanks for taking a look.

So the error is:

Uncaught TypeError: Cannot set property 'src' of null myscripts.js?ver=1:89

Pointing to this line:

artOnly.src = canvas2.toDataURL("image/png");

Try console logging the “artOnly” variable and see what you get.
If you get nothing, try console logging this on line 90, just before ‘}’, and see what you get:

jQuery("#art-color").length;

I sure will. Back tomorrow.

Why is the code working when hard coded into the html between script tags, but not in the enqueued version?

I managed time enough to console.log on artOnly. It was null. I’ll try your other suggestion jQuery("#art-color").length; tomorrow. Thanks for your help!

I didn’t get anything with the second console log. But an error message says both get***Pixels functions are not being found onload. The error message is calling them variables. Hmm.

Maybe it’s a timing issue, i.e. the two get***Pixels() functions are being called before they are available. That might explain why the code works on page but not enqueued.

What’s the full name please: get***Pixels()

I solved the problem.

The assignment of artWall and artOnly at the top of the script was loading before the html that it was looking for. So those objects were null and the code wouldn’t work. So I moved those assignments into the functions that were being called within the html onload events.

That’s why the code was working when hard coded on page, but not enqueued.

Thanks for pointing out the null objects, Andrew!

Andrew said:

What’s the full name please: get***Pixels()

That refers to getWallPixels() and getArtPixels()

So that I can mark this issue has been resolved…