I have html webresource and js file that searches and shows record in popup. The following code works fine on page load but Xrm.WebApi.retrieveMultipleRecords() would not work on button click. Please advise whats goin on.

<div>
   <a> Enter Search String </a>
   <input type="text" id="searchstring">
   <button class="pure-button" onclick="btnClick();">Go</button>
</div>

document.addEventListener('DOMContentLoaded', function () {
    // code only gives information if i call btnClick() here
    //btnClick();
}

function btnClick() {
    Xrm.WebApi.retrieveMultipleRecords("account", "?$select=name&$top=3").then(
        function success(result) {
            for (var i = 0; i < result.entities.length; i++) {
                console.log(result.entities[i]);
            }                    
            // perform additional operations on retrieved records
        },
        function (error) {
            console.log(error.message);
            // handle error conditions
        }
    );
}