我的目标是获得一个按钮，当单击按钮时，表应该显示，但数据是事先显示的，按钮什么也不做

Question

获取JSON数据并将其显示在表中。下面的代码只是一个骨架结构，但我创建的按钮什么也不做，即使，我试图添加一个事件到按钮(点击)，这将显示表根据函数tablechange()。在我单击按钮之前，表已经显示出来了。请帮助。

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);
}
}
}

Answer 1

通过button.addEventListener('click',tablechange(3));，您将立即调用tablechange(3)函数

addEventListener应为

button.addEventListener("click", tablechange.bind(null,3), false);

Answer 2

在初始化时调用函数tablchange(3)，因为您有()调用括号。为了使它只在单击时调用，它应该读取

button.addEventListener('click',tablechange)

当然你不能像这样传递参数，所以你需要将参数设置为函数可以访问的变量。