Ajax code not working after many tries

There happens to be just a simple typo here. Your code is
perfectly alright. just change this.readystate to this.readyStateLook Here for Reference

1 Like

@suyash.patil072008
Try to Simply make function of your code that you want to execute.
Because your code run on initial element which are present in DOM on DOM ready.
After ajax you get new element on which code doesn’t run so put your code in function and call it on DOM ready and after your ajax call.

Hi @suyash.patil072008 ,
Apologies for the delayed response. @shivam.karthik483 's response is correct. It should be readyState(Camel case) and not readystate. Check out this documentation.

Correct code:

if(this.readyState == 4 .....)
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
 <body>
<p id="output"> Default text</p>
    <input id="user_number">
    <button onclick="update_user()">Submit</button>
    <script type="text/javascript">
        function update_user(){
            user_number = document.getElementById("user_number").value;
            //alert(user_number);
            httpRequest = new XMLHttpRequest();
            httpRequest.open("GET", "https://reqres.in/api/users/"+user_number);
            httpRequest.send();

            httpRequest.onreadystatechange = function(){
                if(this.status == 200)
                {
                    user_data = JSON.parse(this.responseText);
                    document.getElementById("output").innerHTML = user_data.data.first_name;
                }
            }
        }
    </script>
</body>
</html>

try this and let me know later