how to prevent promise getting called on page load

Question

I am new to the concept of promise in JavaScript. I have tried to implement promise in my but don't know why it is getting on page load. I know this not a tutorial website but any help would help me to improve my concept of promise. I tried to google the solution for my problem but I was not able to find the solution. As per my logic SearchRecord function should be called on button click but it is getting called on page load

 <button id="Query" class="btn btn-warning" onclick="SearchRecord()" value="Search"><i class="fas fa-search"></i> Search</button>
function SearchRecord() {         
    let InvOrg = $('#InvOrg').val();
    let ItemCode = $('#ItemCode').val();
    let Description = $('#Description').val();

     return new Promise((resolve, reject) => {
        $.ajax({
            url: '/GINV/GINV01/tableData',
            type: 'GET',
            async:'true',
            data: {
                InvOrg: InvOrg, ItemCode: ItemCode, Description: Description
            },
            success: function (data) {
                resolve(data)
            },
            error: function (error) {
                console.log(error)
                reject(error)
            },
        })
     })
              
}
SearchRecord()
    .then((data) => {
        console.log(data)
        tabledata(data)
    })
    .catch((error) => {
        console.log(error)
    })
function tabledata(data) {
    debugger;
    if ($.fn.DataTable.isDataTable('#MainTable')) {
        $('#MainTable').DataTable().destroy();
    }
    $('#MainTable tbody').empty();

    var table = $('#MainTable').DataTable({
        data: data.listIndexData,
        stateSave: true,
        "columns": [
          
            { "data": "itemCode"  },

            { "data": "itemDescription" },

            { "data": "uom" },

            { "data": "quantity", "className": "text-right" },

            { "data": "pslRate", "className": "text-right"  },

            { "data": "value", "className": "text-right" },

            { "data": "unit" },

        ],
    });
   

}

Answer 1

It's because you're invoking the SearchRecord function.

SearchRecord()
    .then((data) => {
        console.log(data)
        tabledata(data)
    })
    .catch((error) => {
        console.log(error)
    })

The above code should be contained in another function.

 <button id="Query" class="btn btn-warning" onclick="anotherFunction()" value="Search"><i class="fas fa-search"></i> Search</button>

function anotherFunction(){
  SearchRecord()
    .then((data) => {
        console.log(data)
        tabledata(data)
    })
    .catch((error) => {
        console.log(error)
    })
}

Answer 2

I was able to find the answer to this question with the help of Bergi although Abdulla's answer is also right. I wanted to this without making a new function.

so per the suggestion of Bergi Answer to this question is

 <button id="Query" class="btn btn-warning" onclick="SearchRecord().then(tabledata).catch((error) => { console.log(error) })" value="Search"><i class="fas fa-search"></i> Search</button>