Taking a JSON data and displaying it in a table. The code below is just a skeleton structure, but the button I am creating does nothing even though, I am trying to add an event to the button(click) which will display the table according to the function tablechange().The table is already displayed before I click the button. Kindly help.

```
var  request= new XMLHttpRequest();
request.open('GET','https://raw.githubusercontent.com/Rajavasanthan/jsondata/master/pagenation.json',true);

request.send();

request.onload=function(){
var data=JSON.parse(request.response);
console.log(data);

var table=document.createElement('table');
table.setAttribute('class','table');
var thead=document.createElement('thead');
thead.setAttribute('class','thead-dark')
var tr=document.createElement('tr');
var tbody=document.createElement('tbody');

var th1=document.createElement('th')
th1.innerHTML='id'
var th2=document.createElement('th');
th2.innerHTML='Name'
var th3=document.createElement('th');
th3.innerHTML='Email';

tr.append(th1,th2,th3);
thead.append(tr);
table.append(thead);

var divis=document.createElement('div');
divis.setAttribute('style','padding:20px');
var button=document.createElement('button');
button.innerHTML="click me";
button.addEventListener('click',tablechange(3));
divis.append(button);
document.body.append(divis);

function tablechange(i=1){
    for(let x=i*5;x<((i+1)*5);x++){
        let k=data[x];

    var td1=document.createElement('td');
    var td2=document.createElement('td');
    var td3=document.createElement('td');
    td1.innerHTML=k.id
    td2.innerHTML=k.name;
    td3.innerHTML=k.email;
    var tr=document.createElement('tr');
    if(x%2===0) tr.setAttribute('style','background-color:#d3d3d3');
    tr.append(td1,td2,td3);
    tbody.append(tr);
    table.append(tbody);

document.body.append(table);
}
}
}

```