Так что я пытаюсь сделать кнопку в реальном времени, используя Javascript и Firebase. В настоящее время у меня есть рабочая кнопка, которая изменяет переменную в базе данных в реальном времени с вкл / выкл. Но значение по умолчанию не сохраняется, поэтому, когда я выключаю кнопку и перезагружаю страницу, она показывает, что она включена, как это исправить? Я также хочу, чтобы он обновлялся в реальном времени между всеми клиентами
Приложение. js
(function() {
//Get elements
const preObject = document.getElementById('object');
// Create reference
dbRefObject = firebase.database().ref().child('button').child('value')
// Sync changes
dbRefObject.on('value', snap => console.log(snap.val()));
}());
document.addEventListener("DOMContentLoaded", function() {
console.log("test");
});
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
const dbRefObject = firebase.database().ref().child('button')
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
dbRefObject.set({value: true})
console.log('Checked');
} else {
dbRefObject.set({value: false})
console.log('Not checked');
}
});
});
Индекс. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" id="checkbox" checked>
<div class="slider"></div>
</label>
<script src="app.js"></script>
</body>
</html>