javascript - 未捕获的类型错误：无法读取 HTMLParagraphElement 处未定义的属性“id”。

Question

我已经看这个很久了，觉得我错过了一些明显的东西，非常感谢任何帮助！

我正在尝试创建嵌套手风琴以方便地表示 Django 模型。使用 Django for 循环创建段落元素并为其赋予 id。然后 JS 用于分配功能（代码如下）。

标题错误指向该行的第一个 id 引用，表明它是未定义的。

if (acc2[i].id.slice(acc2[i].indexOf("_")+1) === acc3[j].id.slice(acc3[j].indexOf("_")+1))  {

但是，使用 console.log 我可以获得这些 id 的预期值（发生错误时，循环的第一次迭代中的“chain_name_1”和“chainseq_1”）。我无法弄清楚为什么它们随后显示为未定义。

var acc2 = document.getElementsByClassName("prot_acc_2");
var acc3 = document.getElementsByClassName("prot_acc_3");
var i;
var j;

for (i = 0; i < acc2.length; i++) {
  acc2[i].addEventListener("click", function() {
    for (j = 0; j < acc3.length; j++) {
      console.log(acc2[0].id)
      console.log(acc3[0].id)
      var content = acc3[j];
      if (acc2[i].id.slice(acc2[i].indexOf("_")+1) === acc3[j].id.slice(acc3[j].indexOf("_")+1))  {
          if (content.style.display === "block") {
            content.style.display = "none";
          } else {
            content.style.display = "block";
          }
      }
    }
  });
}

标签： javascriptdjango

Answer 1

您遇到的问题是您i在事件侦听器中使用但i在“全局”范围内定义并且没有您认为的值。它将具有acc2.length比最大索引大 1 的值acc2，因此acc2[i]将始终返回undefined

您应该在事件处理程序中使用this代替，acc2[i]因为它将等于单击的元素

for (i = 0; i < acc2.length; i++) {
  acc2[i].addEventListener("click", function() {
    for (j = 0; j < acc3.length; j++) {
      var content = acc3[j];
      if (this.id.slice(this.id.indexOf("_") + 1) === acc3[j].id.slice(acc3[j].id.indexOf("_") + 1))  {
          if (content.style.display === "block") {
            content.style.display = "none";
          } else {
            content.style.display = "block";
          }
      }
    }
  });
}