Why if and else both condition executing at same time in JavaScript | If and Else Condition

Question

Why If and else condition work both in JavaScript. if (xhr.readyState == 4 && xhr.status == 200)

I am working on php MVC project.

I created a profile edit page in background JavaScript If and Else both code executing. profile edit Successfully but else code work and it's show error "Sorry, this content isn't available right now".

why this else condition work??

same This code work in login and registration page.
save in local file and run than it work :- online code

Code

 document.querySelector("#Profile_Save").addEventListener("click", () => {
        if (document.querySelector("#Profile_Edit_Email").value.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
            document.querySelector("#Profile_Edit_Msg").classList.remove("active_success");
            document.querySelector("#Profile_Edit_Msg").classList.remove("active_denger");
            document.querySelector("#Profile_Save").innerHTML = "Loading...";
            document.querySelector("#Profile_Save").classList.remove("active");
            document.querySelector("#Profile_Save").disabled = true;

            document.querySelector("#Profile_Edit_F_Name").disabled = true;
            document.querySelector("#Profile_Edit_L_Name").disabled = true;
            document.querySelector("#Profile_Edit_Email").disabled = true;

            var f_name = document.querySelector("#Profile_Edit_F_Name").value,
                l_name = document.querySelector("#Profile_Edit_L_Name").value,
                email = document.querySelector("#Profile_Edit_Email").value;

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "Api/ProfileEdit", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) { // this one if executing 
                    var json = JSON.parse(xhr.responseText);
                    if (json.Status == "Ok") {
                        window.location.href = "Profile"; // it also work 
                    } else {
                        document.querySelector("#Profile_Edit_Msg").classList.remove("active_success");
                        document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
                        document.querySelector("#Profile_Edit_Msg").innerHTML = json.Message;
                    }
                } else { // this one else executing 
                    document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
                    document.querySelector("#Profile_Edit_Msg").innerHTML = "Sorry, this content isn't available right now"; // this message show 
                }
            }
            xhr.send("F_Name=" + f_name + "&L_Name=" + l_name + "&Email=" + email);
            document.querySelector("#Profile_Save").innerHTML = "Register";
            document.querySelector("#Profile_Save").classList.add("active");
            document.querySelector("#Profile_Save").disabled = false;
            document.querySelector("#Profile_Edit_F_Name").disabled = false;
            document.querySelector("#Profile_Edit_L_Name").disabled = false;
            document.querySelector("#Profile_Edit_Email").disabled = false;
        } else {
            document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
            document.querySelector("#Profile_Edit_Msg").innerHTML = "Invalid Email Address!";
        }
    });

return JSON

{"Status":"Ok","Message":"Profile Edit Successfully!"}

Output

open profile page and 
error message:- "Sorry, this content isn't available right now"

help me! Thank you!!

I have put a ```console.log()``` inside if block. It never executed. Are you sure the if block is working? — Rakib Uddin, Jun 14 '22 at 04:14
Online editor not support to call any api or url to get data. Just save local file and run this code — Uttam Nath, Jun 14 '22 at 04:16

score 2 · Accepted Answer · answered Jun 14 '22 at 04:11

The readystatechange event fires multiple times.

Value   State       Description
0       UNSENT      Client has been created. open() not called yet.
1       OPENED      open() has been called.
2       HEADERS_RECEIVED    send() has been called, and headers and status are available.
3       LOADING     Downloading; responseText holds partial data.
4       DONE        The operation is complete.

Your

if (xhr.readyState == 4 && xhr.status == 200) {

branch will only be entered into at the end of a request, if the request was successful. But earlier, while the request is still ongoing, other state changes will occur, and the else branch will be entered into.

Instead, only do anything if the readyState is 4 - and, when it is 4, you can parse the response, or populate the #Profile_Edit_Msg to say there was a problem.

Other improvements:

Save the Profile_Edit_Msg in a variable instead of repetitively selecting it over and over again
Use strict equality, not sloppy equality
Use .textContent when assigning text to an element - only use .innerHTML when inserting HTML markup
JSON is a particular format of a string that can be deserialized into an object or other value. JSON.parse does not return JSON - JSON.parse is called with a JSON-formatted string and returns an object. Call your json variable something else.
denger looks misspelled - did you mean danger? (Typos are a common problem in programming - better to fix them earlier than later)

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
        return;
    }
    const profile = document.querySelector("#Profile_Edit_Msg");
    if (xhr.status === 200) {
        const result = JSON.parse(xhr.responseText);
        if (result.Status === "Ok") {
            window.location.href = "Profile";
        } else {
            profile.classList.remove("active_success");
            profile.classList.add("active_denger");
            profile.innerHTML = json.Message;
        }
    } else {
        profile.classList.add("active_denger");
        profile.textContent = "Sorry, this content isn't available right now";
    }
};

You could also consider using the fetch API instead of XMLHttpRequest - fetch is a bit nicer to work with and has been supported in all modern browsers for ages.

What do you mean, login and registration? This is the first time either of those have been mentioned — CertainPerformance, Jun 14 '22 at 04:22
Can't really say without a clearer example of what's on each page, and what you mean by "work" — CertainPerformance, Jun 14 '22 at 04:28

Why if and else both condition executing at same time in JavaScript | If and Else Condition

1 Answers1