jsAJAXInClass

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>XHR</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin-top: 30px;
            position: relative;
        }

        .mainDiv {
            display: flex;
            flex-direction: row;
        }

        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }

        table {
            width: 70%;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container" class="container">
        <input type="number" id="userId">
    </div>
    <script>
        'use strict'

        class UserDisplay {
            constructor(container, idSource) {
                this._container = document.getElementById(container);
                this._idSource = document.getElementById(idSource);
                this._user = [];
                this._userId = 0;

                this._idSource.addEventListener('change', (event) => {
                    this._userId = event.target.value;
                    this.getUser();
                });
            }

            getUser() {
                let url = `https://jsonplaceholder.typicode.com/users?id=${this._userId}`;
                let method = 'GET';

                let xhr = new XMLHttpRequest();

                let selfObject = this;

                xhr.open(method, url);
                //xhr.addEventListener('load', function () {

                //    console.log(selfObject);

                //    if (this.status >= 400) {
                //        console.log(`HTTP ERROR CODE: ${this.status}!`);
                //    }
                //    else {
                //        selfObject._user = JSON.parse(this.responseText);
                //        console.log(selfObject._user);

                //        if (selfObject._user.length == 0) {
                //            alert('No such user!')
                //        }
                //        else {
                //            selfObject.renderUser()
                //        }
                //    }
                //});

                xhr.addEventListener('load', (event) => {

                    //console.log(this);
                    //console.log(event.target);

                    let xhr = event.target;

                    if (xhr.status >= 400) {
                        console.log(`HTTP ERROR CODE: ${xhr.status}!`);
                    }
                    else {
                        this._user = JSON.parse(xhr.responseText);
                        //console.log(this._user);

                        if (this._user.length == 0) {
                            alert('No such user!')
                        }
                        else {
                            this.renderUser()
                        }
                    }
                });

                xhr.send();
            }

            renderUser() {
                let user = this._user[0];

                let table = document.createElement('table');
                let elems = ['id', 'name', 'username', 'email'];

                for (let el of elems) {
                    let row = document.createElement('tr');
                    let cell = document.createElement('td');
                    cell.innerText = el;
                    row.append(cell);
                    cell = document.createElement('td');
                    cell.innerText = user[el];
                    row.append(cell);
                    table.append(row);
                }

                this._container.append(table);
            }

        }

        function test() {
            console.log(this);
        }


        {
            //test();

            //let obj = { a: 10, test: test };
            //obj.test();

            //let objSecond = { b: 42, z: 33, test: obj.test };
            //objSecond.test();
            //let freeTest = obj.test;

            //freeTest();

            //let masha = function () {

            //}

            let uDisp = new UserDisplay('container', 'userId');
        }
    </script>
</body>
</html>