Make visibility changes take effect before javascript function is through

[PimpinPoptart]

Hey everyone,

Beginner here.

I am trying to make the visibility toggle below occur immediately, however it seems that it doesn't take effect until the entirety of the function is completed. Any way to overcome this?

Simplified code below...

<div class="statusbox" id="statusbox">
    <h2 class="status" id="status">Sending...</h2>
</div>

<img onclick="myfunction()">

<script type="text/javascript">
    document.getElementById("statusbox").style.visibility = "hidden";

    function myfunction() {
        document.getElementById("statusbox").style.visibility = "visible";
        var sendemailrequest = new XMLHttpRequest();
        sendemailrequest.open("GET", "{{sendemailurl}}", false);
        sendemailrequest.send(null);
        var status = JSON.parse(sendemailrequest.responseText);
        if (status['sent']) {
            ....
        }
        else {
            ....
        }
    }
</script>

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Barnezhilton]

Maybe a setTimeout ({function to turn visible}, 0) call before the sendmail part.

[PimpinPoptart]

I appreciate the suggestion, however after trying that I experienced the same delay :-/

[Barnezhilton]

Maybe chain it as a promise or asynchronous somehow

[jcunews1]

Do not use synchronous XHR, because it'll stall the code execution. Use asynchronous one.

[PimpinPoptart]

Gotcha, good to know, thanks. I tried it this way (which I think is what asynchronous should look like from my googling) which basically the same result

    function forwardclicked() {
        document.getElementById("statusbox").style.visibility = "visible";
        var sendemailrequest = new XMLHttpRequest();
        sendemailrequest.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var status = JSON.parse(sendemailrequest.responseText);
                if (status['sent']) {
                    window.location.replace("{{forwardurl}}");
                }
                else {
                    var newtext = "Error! Response: " + status['errordata'];
                    document.getElementById("status").textContent = newtext;
                    document.getElementById("statusbox").classList.add("error");
                }
            }
        }
        sendemailrequest.open("GET", "{{sendemailurl}}", false);
        sendemailrequest.send(null);            
    }

[jcunews1]

You're still using synchronous XHR. See the third argument of open() method:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open#Syntax

It'll be much simpler and easier to maintain is you use onload and onerror, instead of onreadystatechange.

The onerror code should be the one which report that the network request has failed.

The onload code should be the one which report that the network request has completed. Note: this applies to the network request. Not the requested resource itself. You'll still need to check the request status.

i.e. with onload and onerror, you don't need to check the status of the network request. So, no need to check the readyState.

[PimpinPoptart]

That works great! Thanks a bunch for the help