Form value API Request - Javascript Axios - Ajax

Question

I am trying to enter a value in the form and if the value is equal to the login string of the api return me the login property and show in HTML.

Html do form e do button 
<input id="procurar" type="text" name="user">
<button type="submit" onclick="botao()"> Procurar </button> 

Including onclick="proc()" on the html button returns this error

ERROR: index.html:51 Uncaught Referenceerror: proc is not defined At Htmlbuttonelement.onclick (index.html:51)

// PROMISE - PARAMETROS;
    var MyPromise = function () {
        return new Promise(function (resolve,reject){

            // Rquesição;
            xhr = new XMLHttpRequest();

            // Consumindo API;
            xhr.open('GET', 'https://api.github.com/users/diczr');
            xhr.send(null);

            // Status do retorno da api;
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // Passando string para javascript Object;
                        resolve (JSON.parse(xhr.responseText));
                    } else {
                        reject('Error request;') }}}} );
    } 

    // Chamando Promise;
        MyPromise()
            // Resposta da api;
            .then(function proc (response) {
                console.log(response);
                searchz = document.getElementById("procurar").value;
                if( searchz == response.login) {
                    document.getElementById("loginz").innerHTML = searchz;
                }
            })
                // Tratando erros;
            .catch(function(error){
                console.log(error);
            })

if anyone can help me. I appreciate, Thank you!

Answer 1

This error happens when you pass to the method onclick a function that does not exist. Put all your code inside a function.

<input id="procurar" type="text" name="user">
<button type="submit" onclick="botao()"> Procurar </button> 

function botao() {

    // PROMISE - PARAMETROS;
    var MyPromise = function () {
        return new Promise(function (resolve,reject){

            // Rquesição;
            xhr = new XMLHttpRequest();

            // Consumindo API;
            xhr.open('GET', 'https://api.github.com/users/diczr');
            xhr.send(null);

            // Status do retorno da api;
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // Passando string para javascript Object;
                        resolve (JSON.parse(xhr.responseText));
                    } else {
                        reject('Error request;') }}}} );
                    } 

    // Chamando Promise;
    MyPromise()
        // Resposta da api;
        .then(function proc (response) {
            console.log(response);
            searchz = document.getElementById("procurar").value;
            if( searchz == response.login) {
                document.getElementById("loginz").innerHTML = searchz;
            }
        })
        // Tratando erros;
        .catch(function(error){
            console.log(error);
        });
}