title: Uncaught ReferenceError: clickDone is not defined at HTMLSpanElement.onclick (home.html:1)
body: <p>In my web app, a user can create a classroom and then it will be save to the firebase database. After that, the newly created classroom and along with the old class will be retrieve and store in the <strong>Classroom:</strong> as shown in the <a href="https://i.stack.imgur.com/mVTVq.jpg" rel="nofollow noreferrer">image</a></p>
  
  <p>All the classroom on the list can be click and should show the details of it like: Classroom ID, Teacher, Students. But whenever I do that, an error would appear on the <a href="https://i.stack.imgur.com/EGSB9.jpg" rel="nofollow noreferrer">console log</a></p>
  
  <p>This is the code: </p>
  
  <pre><code>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 += '&lt;span 
  onclick="clickDone(this)"&gt;'+roomNames[key]+'&lt;/span&gt;&lt;ul style="display:none"&gt; 
  &lt;li&gt;Class Id : '+classD[key]+'&lt;/li&gt;&lt;li&gt;Teacher : '+titsNames[key]+'&lt;/li&gt; 
  &lt;/ul&gt;';
  
    });
  
    function clickDone(thisVar){
      var is = thisVar.nextSibling.style.display;
      if(is == 'none'){
        thisVar.nextSibling.style.display = 'initial';
      }else{
        thisVar.nextSibling.style.display = 'none';
      }
    }
  
   });
  </code></pre>
  
  <p>What went wrong? What did I miss? Any help from you would be greatly appreciated.</p>