Question

无法设置 fetch() 之外的变量的 innerHTML

2019-12-22

56

javascript ajax

我使用 for() 循环遍历 querySelectorAll 匹配项，当前匹配项名为 meta[i] 。在 for() 函数中，我使用 fetch() 从另一个页面获取一些信息。问题显然是，我无法在 fetch() 函数中设置 meta[i] 的 innerHTML 。这是我的代码：

function variations() {
  var meta = item.querySelectorAll('.meta_items tr td:nth-child(1)'), i;
  var id = 1;
  for (i = 0; i < meta.length; ++i) {
    meta[i].querySelector('input').setAttribute('type', 'hidden');
    meta[i].querySelector('input').value = id;
    fetch('../public/orders.php?id=' + id).then((resp) => resp.text()).then(function(data) {
      meta[i].innerHTML = data;
    });
  }
}

这是我收到的错误：

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of undefinedat test.js:8

Answer 1

您的 function 具有 for 循环，添加了一些 AJAX 调用，当应答时，它们的回调被调用。但是，当它们的回调被调用时，由于您的 for，您的函数范围的 i 已经超出范围。一个非常简单的修复方法如下：

function variations() {
  var meta = item.querySelectorAll('.meta_items tr td:nth-child(1)');
  var id = 1;
  for (let i = 0; i < meta.length; ++i) {
    meta[i].querySelector('input').setAttribute('type', 'hidden');
    meta[i].querySelector('input').value = id;
    fetch('../public/orders.php?id=' + id).then((resp) => resp.text()).then(function(data) {
      meta[i].innerHTML = data;
    });
  }
}

我没有改变您定义 id 的方式。对于所有请求及其回调，id = 1 是否正确？

Answer 2

我认为，到由于 ++ i 而完成的获取时， i 的值是是 meta.length 。因此，您正在访问 meta [meta.length] ，这是 undefined 。尝试

881211280