Why am I not getting a status code of 200?

I am using the github api to display the user info and repos on a webpage.

<body>
    <section id='input'>
        <h1>Github Repository Obtainer</h1>
        <input type="text", id="input-text", placeholder="Enter a Github username">
        <button id="submit-button">Search</button>
    </section>
    <hr>
    <section id="main">
        <ul id="tag">
            <li class="tag-item">User Info</li>
            <li class="tag-item">User Repository</li>
        </ul>
        <hr>
        <section id="user">
            
        </section>
        <section id="repo">
        <ul id="repository-list">

        </ul></section>
    </section>
    <script src="index.js"></script>
</body>
</html>

button = document.getElementById("submit-button");

button.addEventListener("click", () => {
    const user = document.getElementById("input-text").value;
    const xmr = new XMLHttpRequest();
    xmr.open("GET", `https://api.github.com/users/${user}/repos`, true);

    xmr.onload = () => {
        let list = document.getElementById("repository-list")
        if(this.status === 200){
            console.log(this.status)
            const data = JSON.parse(this.responseText);
            var output = '';
            data.forEach((item, index) => {
                let tempChild = document.createElement("li")
                tempChild.setAttribute("id", "list-item")
                output += `<ul>
                                <li><span>Name:</span> ${item.name}</li>
                                <li><span>Description:</span> ${item.description}</li>
                                <li><span>URL:</span><a href = "${item.html_url}" target="_blank"> ${item.html_url}</a></li>
                            </ul>`
                tempChild.innerHTML = output
                list.appendChild(tempChild)
            })
        } else {
            list.innerHTML = "<h1>User cannot be found</h1>"
        }
    }
    xmr.send();

    const xmr2 = new XMLHttpRequest();
    xmr2.open("GET", `https://api.github.com/users/${user}`, true);
    xmr2.onload =() => {
        if(this.status === 200){
            const data2 = JSON.parse(this.responseText);
            var output = '';
            output += `<h1>${data2.login}</h1>
                       <img src="${data2.avatar_url}">
                       <ul id="user-info-list">
                            <li><span>Bio: </span>${data2.bio}</li>
                            <li><span>Public Repositories: </span>${data2.public_repos}</li>
                            <li><span>Public Gists: </span>${data2.public_gists}</li>
                            <li><span>Followers: </span>${data2.followers}</li>
                            <li><span>Following: </span>${data2.following}</li>
                            <li><span>Location: </span>${data2.location}</li>
                            <li><span>Created on: </span>${data2.created_at.slice(0, 10)}</li>
                            <li><span>URL: </span><a href="${data2.html_url}">${data2.html_url}</a></li>
                       <ul>`

            } else{
                var output = "<h1>User does not exist</h1>"
            }
        document.getElementById("user").innerHTML = output
    }
    xmr2.send()
    tabChecker();
})

tabChecker() is another function in the js file, which I have not included here. It is not causing the problem. The output is always user not found even though the user exists on github. Please provide answers to what the problem might be. Also when I console.log(this.status) the output in console is blank. The links for the api works fine when I put the link in the browser

Solution

You should use xmr2.status instead of this.status OR don't use arrow function: xmr2.onload = function() {...}. Arrow functions don't have its own this.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions