Я хочу отобразить все дочерние элементы родительского узла в моем html.
Я использую функцию child_added в firebase, поэтому она будет запускать функцию для каждого дочернего элемента.
, например, еслиесть 2 дочерних элемента, функция будет запускаться 2 раза ..
, и она запускается 2 раза в console.log означает, что она печатает все дочерние элементы ..!
, но внутренний htmlтолько показывает мне последнего добавленного потомка, в то время как консоль показывает мне всех потомков.я не знаю, почему это происходит, так что я в замешательстве ..
Я использую оператор innerHTML +=
+=, чтобы добавить всех потомков, но на этот раз я не знаю, почему это не такработает.
Здесь вы можете увидеть, как консоль выполняет функцию 2 раза, это означает, что она должна добавлять внутренний html 2 раза, вместо этого она просто добавляет внутренний html только в последний раз.! См. Console.log на этом скриншоте ..!
Вот мой код 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)
})
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~