My vanilla javascript works on Windows 10. In 11, it doesn't. Is there a magic fix?

Question

My vanilla javascript works on Windows 10. In 11, it doesn't. Is there a magic fix?

Coreysan 1,811

I wrote a Core 3.1 project, which uses the standard .NET file upload routine. I put simple javascript in it,

which displays a trashcan on top of an uploaded image, and if clicked, it deletes the image from view.

In windows 10, it's perfect. When my wife got a laptop with W 11 on it, she clicks on the trashcan and

nothing happens. I really hope there's an easy answer for this!

Should I post the code?

SurferOnWww 4,721 Reputation points

2023-08-03T00:36:43.4866667+00:00

Should I post the code?

Yes, but please make a minimum sample code required only to reproduce the issue.
Anonymous

2023-08-03T01:36:35.23+00:00

Should I post the code?

Yes, it is better to share the related code.

Besides, can you tell us which version/kind of browser you are using to display the web site? If using F12 developer tools to check your site, if there any error?

Coreysan 1,811

Here's the html and javascript code in snippets. The html is the top 6 lines. everything else is the javascript, in the same view.

I tried to arrange it so that when you read the javascript code, the 2 functions appear first, then the body of the code.

The function in question is "ScupperPicture". The idea was to display a trashcan icon on top of an image, and if the user clicked on the trashcan, it would fire the function to delete the image.

It works great in Windows 10!!!!

        <div class="dz-container">
            <div class="drop-zone1">
               <span class="user_message">Click to upload</span>
               <input type="file" name="myname1" class="dz_input1" id="input1" />
            </div>
        </div>




        function ScupperPicture(dzclass, thumbclass, inputid) {
            event.stopPropagation();

            // ----------------------------------------------------
            // 1. Remove the image from the display screen
            // ----------------------------------------------------

            let myimage = document.querySelector(thumbclass);
            myimage.parentNode.removeChild(myimage);

            // ----------------------------------------------------
            // 2. Remove the file from IFormFile FileList
            // ----------------------------------------------------

            document.getElementById(inputid).value = "";

             // ----------------------------------------------------
            // 3. Remove the image from the preview box
            // ----------------------------------------------------

            let mypreviewimage = document.querySelector(".dz_previewBox");
            mypreviewimage.style.backgroundImage = null;

            // ----------------------------------------------------
            // 4. Put back the message that was removed in step #1
            // ----------------------------------------------------

            let dz = document.querySelector(dzclass);
            var user_message = document.createElement("span");
            user_message.innerHTML = "Click to upload";
            user_message.classList.add("user_message");
            dz.appendChild(user_message);
        }

        function updateThumbnail(dropzoneElement1, file, thumbclassname) {
            let thumbclass = "." + thumbclassname;
            let thumbnailElement = dropzoneElement1.querySelector(thumbclass);
            let mypreviewElement = document.getElementById("previewbox_id");

            if (dropzoneElement1.querySelector(".user_message")) {
                dropzoneElement1.querySelector(".user_message").remove();
            }

            if (!thumbnailElement) {
                thumbnailElement = document.createElement("div");
                thumbnailElement.classList.add(thumbclassname);
                dropzoneElement1.appendChild(thumbnailElement);
            }

            // Dropzone Box
            if (file.type.startsWith("image/")) {
                const reader = new FileReader();

                reader.readAsDataURL(file);
                reader.onload = () => {
                    thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
                    mypreviewElement.style.backgroundImage = `url('${reader.result}')`;
                };
            } else {
                thumbnailElement.style.backgroundImage = null;
                mypreviewElement.style.backgroundImage = null;
            }
        }

        let inputElement1 = document.getElementById("input1");
        let dropzoneElement1 = document.querySelector(".drop-zone1");

        dropzoneElement1.addEventListener("click", e => {
            inputElement1.click();
        });

        inputElement1.addEventListener("change", e => {
            if (inputElement1.files.length) {
                updateThumbnail(dropzoneElement1, inputElement1.files[0], "dz_thumb1");
            }
        });

        dropzoneElement1.addEventListener("mouseover", e => {
            if (!dropzoneElement1.querySelector(".user_message")) {
                let overlayElement1 = document.createElement("div");
                overlayElement1.classList.add("overlay");
                overlayElement1.style.opacity = 1;
                dropzoneElement1.appendChild(overlayElement1);

                // For the link
                let linkElement1 = document.createElement("a");
                linkElement1.href = "#";
                linkElement1.classList.add("icon");
                linkElement1.setAttribute("onclick", "ScupperPicture('.drop-zone1', '.dz_thumb1', 'input1')");
                overlayElement1.appendChild(linkElement1);

                // For the trash can
                let i = document.createElement("i");
                i.classList.add("fa");
                i.classList.add("fa-trash");
                linkElement1.appendChild(i);
            }
        });

        dropzoneElement1.addEventListener("mouseout", e => {
            if (dropzoneElement1.querySelector(".overlay")) {
                dropzoneElement1.querySelector(".overlay").remove();
            }
        });

AgaveJoe 1,510 Reputation points

2023-08-06T12:21:27.7666667+00:00

It works great in Windows 10!!!!

JavaScript runs in the browser. What browser and version is the Windows 11 machine using to view the page? What browser and version is the Windows 10 machine using?

You state that you wrote this code so have you tried debugging the code? Open the browser's dev tools and look for error in the console. Set a breakpoint and make sure the JavaScript is executing as expected.
Coreysan 1,811 Reputation points

2023-08-07T16:37:49.5633333+00:00

@AgaveJoe I'll get all those answers. I should have thought of that first. I built my code on Windows 10, using the latest FireFox browser. I ran the website on my wife's laptop, Windows 11, also Firefox (but I don't know the version).

That's why my knee jerk reaction was to think it's W11. I'll debug. Sorry - I should have done that first!
Anonymous

2023-08-11T02:26:27.62+00:00

Hi @Coreysan

Is there any update about this problem? Whether it have been solved or not?

1 answer

Your answer

SurferOnWww 4,721 Reputation points

2023-08-03T00:36:43.4866667+00:00

Should I post the code?

Yes, but please make a minimum sample code required only to reproduce the issue.
Anonymous

2023-08-03T01:36:35.23+00:00

Should I post the code?

Yes, it is better to share the related code.

Besides, can you tell us which version/kind of browser you are using to display the web site? If using F12 developer tools to check your site, if there any error?
AgaveJoe 1,510 Reputation points

2023-08-06T12:21:27.7666667+00:00

It works great in Windows 10!!!!

JavaScript runs in the browser. What browser and version is the Windows 11 machine using to view the page? What browser and version is the Windows 10 machine using?

You state that you wrote this code so have you tried debugging the code? Open the browser's dev tools and look for error in the console. Set a breakpoint and make sure the JavaScript is executing as expected.
Coreysan 1,811 Reputation points

2023-08-07T16:37:49.5633333+00:00

@AgaveJoe I'll get all those answers. I should have thought of that first. I built my code on Windows 10, using the latest FireFox browser. I ran the website on my wife's laptop, Windows 11, also Firefox (but I don't know the version).

That's why my knee jerk reaction was to think it's W11. I'll debug. Sorry - I should have done that first!
Anonymous

2023-08-11T02:26:27.62+00:00

Hi @Coreysan

Is there any update about this problem? Whether it have been solved or not?

Answer 1

Coreysan 1,811

I'll close this for now. It will take me time to debug.

Share via

My vanilla javascript works on Windows 10. In 11, it doesn't. Is there a magic fix?

1 answer

Your answer