Javascript 未捕获类型错误：无法读取属性'；id'；在HTMLParagraphElement处未定义的值。<；匿名>；

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

我正在尝试创建嵌套手风琴，以方便的方式表示Django模型。段落元素是使用Django for循环创建和给定ID的。然后使用JS分配功能（下面的代码）

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

if (acc2[i].id.slice(acc2[i].indexOf("_")+1) === acc3[j].id.slice(acc3[j].indexOf("_")+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";
          }
      }
    }
  });
}

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

if (acc2[i].id.slice(acc2[i].indexOf("_")+1) === acc3[j].id.slice(acc3[j].indexOf("_")+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";
          }
      }
    }
  });
}

var acc2=document.getElementsByClassName（“prot_acc_2”）；
var acc3=document.getElementsByClassName（“prot_acc_3”）；
var i；
var j；
对于（i=0；i

您遇到的问题是，您在事件侦听器中使用了

i

，但

i

是在“全局”范围中定义的，并且没有您认为的值。它的值为

acc2。length

比

acc2

的最大索引大一，因此

acc2[i]

将始终返回

未定义的

您应该在事件处理程序中使用
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";
          }
      }
    }
  });
}

for（i=0；i