Question

我想在html中显示父节点的所有子节点。

我正在使用firebase的child_added函数，因此它将在每个子节点上运行该函数。

例如，如果有2个子节点，该函数将运行2次..

并且它在console.log中运行了2次意味着它正在打印所有的孩子..！

但内部html只显示我最后添加的孩子，而控制台显示所有孩子。我不知道为什么会发生这种情况，现在很困惑..

我正在使用innerHTML +=

+=运算符可以添加所有孩子，但这次我不知道为什么这不起作用。

在这里你可以看到控制台正在运行该功能2次，意味着它应该添加内部html 2次，而不是只是最后一次添加内部html。 See Console.log in this screenshot..!

这是我的JavaScript代码innerHTML： -

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 var i = 0;
 firebase.database().ref(`BLOCKEDUSERS`).on('child_added',(data)=>{

  i =  i+1;
    document.getElementById("userdata").innerHTML = "";
    havedata = "yes";
    var quotedkey = "'"+data.key+"'"
    var keys = data.key;

   console.log("Function is Running "+(i)+" Times.")
   data.forEach(function(childs){
   console.log(childs.child("Name").val())
   naam = childs.child(`Name`).val();
   email = childs.child('Email').val();
   citty = childs.child('city').val();
   countryy = childs.child('country').val();

   document.getElementById("userdata").innerHTML += '<div class="card border-dark mb-3" style="max-width: 18rem;"> <div class="card-header">User Details:</div> <div class="card-body text-dark"> <h5 class="card-title name">'+naam+'</h5> <p class="card-text"><b>Email: </b> '+email+' <br> <b>Country: </b>'+countryy+'<br><b>City: </b> '+citty+'  </p> </div>  <div class="card-footer bg-transparent border-success"><button class="btn btn-danger" onclick="unblockuser('+quotedkey+')" >Unblock</button></div></div>';

});


console.log(data)
console.log(data.key)


 })

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

LOL 它正在删除第一个孩子，因为我已添加 document.getElementById（＆＃34; userdata＆＃34;）。innerHTML =＆＃34;＆＃34 ;;

删除后我的功能正常工作..！

我无法使用+ =运算符显示Firebase父节点中的所有子节点

1 个答案: