未捕获的 ReferenceError：未在 HTMLSpanElement.onclick (home.html:1) 中定义 clickDone

Question

在我的网络应用程序中，用户可以创建一个教室，然后将其保存到 firebase 数据库。之后，新创建的教室和旧班级将被检索并存储在教室：中，如image

所示

列表中的所有教室都可以点击，并应显示其详细信息，例如：教室 ID、教师、学生。但每当我这样做时，console log 上就会出现错误

这是代码：

var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
userRef.on('child_added', function(data) {

var roomNames = data.val().TheClass;
var titsNames = data.val().Teacher;
var classD = data.val().ClassID;

var ul = document.createElement('ul');


document.getElementById('myList').appendChild(ul);


var li = document.createElement('li');

ul.appendChild(li);


Object.keys(roomNames).forEach(function(key){
   li.innerHTML += '<span 
onclick="clickDone(this)">'+roomNames[key]+'</span><ul style="display:none"> 
<li>Class Id : '+classD[key]+'</li><li>Teacher : '+titsNames[key]+'</li> 
</ul>';

  });

  function clickDone(thisVar){
    var is = thisVar.nextSibling.style.display;
    if(is == 'none'){
      thisVar.nextSibling.style.display = 'initial';
    }else{
      thisVar.nextSibling.style.display = 'none';
    }
  }

 });

出了什么问题？我错过了什么？您的任何帮助将不胜感激。

Answer 1

函数 clickDone 必须是全局的，才能在 onclick 事件期间被引用。将函数 clickDone 移到所有代码之外，最后一行之后。
并且“li”必须在循环内创建
试试这个

var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
userRef.on('child_added', function(data) {

    var roomNames = data.val().TheClass;
    var titsNames = data.val().Teacher;
    var classD = data.val().ClassID;

    var ul = document.createElement('ul');
    document.getElementById('myList').appendChild(ul);

    Object.keys(roomNames).forEach(function(key){
        var li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML += '<span onclick="clickDone(this)">'+roomNames[key]+'</span><ul style="display:none">' + 
            '<li>Class Id : '+classD[key]+'</li><li>Teacher : '+titsNames[key]+'</li>' +
            '</ul>';
        });

});

function clickDone(thisVar){
    var is = thisVar.nextSibling.style.display;
    if(is == 'none'){
      thisVar.nextSibling.style.display = 'initial';
    }else{
      thisVar.nextSibling.style.display = 'none';
    }
}