javascript - 无法为用于 XML http 请求的 onload 函数内的标记定义 onclick 事件

Question

在这里，我试图将表格与分页联系起来。我已经分别创建了分页和表格，我正在尝试将它们链接起来。每次按下一步或返回时，应显示相应的表格列表。但是当我在 request.onload 函数中包含函数 pagelook() 时，我在 pagelook(li 标签) 中定义的 onclick 事件不起作用。当我单击 prev/Next 时，出现错误：

未捕获的 ReferenceError：未定义 pagelook。

我应该进行哪些更改以便我可以链接它们并且我的 onclick 事件也可以工作？

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

function tablechange(i){
    for(let x=i*5;x<((i+1)*5);x++){
        let k=data[x];
        foo(k.id,k.name,k.email,x);
    }
}
    


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


const ultag=document.querySelector('ul');

function pagelook(page=1){
    var litag='';
    tablechange(page-1)
    if(page>1){
        litag+=`<li class="start" onclick="pagelook(${page-1})"><i class="fa fa-angle-left "></i> Prev</li>`;
        ultag.innerHTML=litag;
    }
        for(let pagetodisplay=(page-1);pagetodisplay<=(page+1);pagetodisplay++)
        {
            if((pagetodisplay)===0){
                continue;
            }
            else if((page+1)>20){
                break;
            }
            if(pagetodisplay===page){
                litag+=`<li class="num active">${pagetodisplay}</li>`
            }else
            litag+=`<li class="num">${pagetodisplay}</li>`;
        }
    ultag.innerHTML=litag;

    if(page<20){
        litag+=`<li class="start" onclick="pagelook(${page+1})">Next <i class="fa fa-angle-right"></i></li>`;
        ultag.innerHTML=litag;
    }

}
pagelook();
}

标签： javascripthtmlxmlhttprequest