XMLHttpRequest的onload内函数绑定onclick报pagelook未定义如何解决

错误原因 #

你将pagelook函数定义在XMLHttpRequest的onload回调函数内部，属于函数局部作用域的成员，而行内onclick事件触发时会从全局作用域查找调用的函数，自然找不到pagelook，就会抛出未定义的错误。

修复方案 #

这里推荐使用事件委托替代行内onclick写法，符合前端编码规范，不需要修改函数作用域即可解决问题，同时还需要修复原有代码的两个逻辑缺陷：

• 切换页面时要先清空旧的表格内容，避免新数据追加在旧数据后面
• 分页按钮拼接时不要多次给ultag.innerHTML赋值，应该拼接完所有li内容后再统一赋值，避免前面的内容被覆盖

完整可运行修改后代码 #

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

  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, tbody);
  document.body.append(table);

  const ultag = document.querySelector('ul');
  // 事件委托绑定分页点击，不用行内onclick
  ultag.addEventListener('click', function(e) {
    const targetLi = e.target.closest('li.start');
    if (!targetLi) return;
    const currentPage = parseInt(document.querySelector('li.num.active').textContent);
    if (targetLi.textContent.includes('Prev')) {
      pagelook(currentPage - 1);
    } else if (targetLi.textContent.includes('Next')) {
      pagelook(currentPage + 1);
    }
  })

  function tablechange(i) {
    // 切换页先清空旧内容
    tbody.innerHTML = '';
    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);
  }

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

    if (page < 20) {
      litag += `<li class="start">Next <i class="fa fa-angle-right"></i></li>`;
    }
    // 所有li拼接完成后统一赋值
    ultag.innerHTML = litag;
  }
  pagelook();
}

内容的提问来源于stack exchange，提问作者Sathwic