Question

在我的Web应用程序中，用户可以创建教室，然后将其保存到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';
    }
}

未捕获的ReferenceError：在HTMLSpanElement.onclick（home.html：1）上未定义clickDone

1 个答案: