Tengo una base de datos en Firebase que recibe datos desde una aplicación Android, la aplicación manda los datos ya encerrados en etiquetas HTML, con clases y Id's. Yo obtengo los datos de Firebase con Javascript y los imprimo en pantalla. los datos se muestran correctamente. Pero al parecer sobrescribe todo sobre el archivo HTML ya que al archivo le agrego un elemento h1 para darle un titulo y al cargar al proyecto me muestra el elemento h1 pero enseguida desaparece y se muestran los datos obtenidos desde Firebase. Tampoco me deja darle estilos, los selecciono con las clases con las que ya vienen los elementos pero al parecer no los lee.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="referenceFirebase.js"></script>
<link rel="stylesheet" href="estilosPedido.css">
<title>Prueba</title>
</head>
<body>
<h1> Pedidos</h1>
<script src="pruebaPedido.js"></script>
</body>
</html>
---------------------- CSS ------------------------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.divPedidos {
background: #FF8A33;
width: 10px;
height: 10px;
}
p {
background: #FF8A33;
font-size: 50px;
}
--------------------- archivo JS --------------------
var referenceMesa = databaseRefence.child('Mesa3');
var referencePedidos = referenceMesa.child('Pedidos');
var referenceUsuario = referencePedidos.child('Usuario1');
var referencePedido = referenceUsuario.child('Pedido1');
var pedido1;
referencePedido.once('value').then(function (snapshot) {
pedido1 = snapshot.val();
console.log(pedido1);
setTimeout(prueba, 1000);
});
function prueba() {
document.write(pedido1);
}
document.write
. La doc dice esto: *Nota: dado que document.write escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión. Debes adjuntar el contenido obtenido de F. Base a algún elemento del DOM.<div id="firebase"></div>
y en Javascript en vez dedocument.write
, pones algo así:var divFireBase= document.getElementById('firebase'); divFireBase.innerHTML = pedido1;
O bien lo pones en eldivPedidos
si es ahí donde los quieres mostrar:divPedidos.innerHTML = pedido1;
pedido1
en el div con iddivPedidos
, si quieres mostrar el contenido en ese div. O sea, sería hacer esto:divPedidos.innerHTML = pedido1;
sin olvidar de quitar la línea dedocument.write