Uncaught ReferenceError: clickDone не определен в HTMLSpanElement.onclick (home.html: 1)

Question

В моем веб-приложении пользователь может создать класс, а затем он будет сохранен в базе данных Firebase.После этого только что созданный класс и старый класс будут извлечены и сохранены в классе: , как показано на изображении

.список можно щелкнуть и должен отображать подробную информацию о нем, как: идентификатор класса, учитель, студенты.Но всякий раз, когда я делаю это, в журнале консоли появляется ошибка

Это код:

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';
    }
}