Skip to main content
Mejora de indentación, prolijidad del código.
Origen Enlace

No es firebase, estas tomando todo el elemento cada vez, la primera vez esta vacio, pero la segunda ya tiene "la primera", intenta vaciar el innerHTML antes de empezar.

Hace esto para vaciar el HTML:

document.querySelector('#temperatura').innerHTML = ""
firebaseRef4.on("value", function (snapshot) { 

    (aca) document.querySelector('#temperatura').innerHTML = ""
    
    snapshot.forEach(function (element) { 

       document.querySelector('#temperatura').innerHTML += `
           <div style="margin-top: 20px ;">$;">
              ${"    "+ element.val() + " ° C registrados"}
           </div> 
           <hr>`   
   
       })
    })

No es firebase, estas tomando todo el elemento cada vez, la primera vez esta vacio, pero la segunda ya tiene "la primera", intenta vaciar el innerHTML antes de empezar.

Hace esto:

document.querySelector('#temperatura').innerHTML = ""
firebaseRef4.on("value", function (snapshot) {
(aca) document.querySelector('#temperatura').innerHTML = ""
    snapshot.forEach(function (element) {
    document.querySelector('#temperatura').innerHTML += `
    <div style="margin-top: 20px ;">${"    "+ element.val() + " ° C registrados"}</div> <hr>`     
    })
  })

No es firebase, estas tomando todo el elemento cada vez, la primera vez esta vacio, pero la segunda ya tiene "la primera", intenta vaciar el innerHTML antes de empezar.

Hace esto para vaciar el HTML:

document.querySelector('#temperatura').innerHTML = ""
firebaseRef4.on("value", function (snapshot) { 

    (aca) document.querySelector('#temperatura').innerHTML = ""
    
    snapshot.forEach(function (element) { 

       document.querySelector('#temperatura').innerHTML += `
           <div style="margin-top: 20px ;">
              ${"    "+ element.val() + " ° C registrados"}
           </div> 
           <hr>`   
   
       })
    })
Origen Enlace

No es firebase, estas tomando todo el elemento cada vez, la primera vez esta vacio, pero la segunda ya tiene "la primera", intenta vaciar el innerHTML antes de empezar.

Hace esto:

document.querySelector('#temperatura').innerHTML = ""
firebaseRef4.on("value", function (snapshot) {
(aca) document.querySelector('#temperatura').innerHTML = ""
    snapshot.forEach(function (element) {
    document.querySelector('#temperatura').innerHTML += `
    <div style="margin-top: 20px ;">${"    "+ element.val() + " ° C registrados"}</div> <hr>`     
    })
  })