所以我正在尝试使用 Javascript 和 Firebase 制作一个实时按钮。目前我有一个工作按钮，可以将实时数据库中的变量从打开更改为关闭。但默认值未保存，因此当我关闭按钮并重新加载页面时，它显示它已打开，我该如何解决此问题？我还希望它在所有客户端之间实时更新
App.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>
最佳答案
您正在从数据库中读取数据，但尚未对其执行任何有用的操作:
dbRefObject.on('value', snap => console.log(snap.val()));}
要让按钮反射(reflect)您存储在数据库中的状态，请使用此监听器更新按钮的状态:
dbRefObject.on('value', (snap) {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.checked = snap.val().value;
})
关于javascript - Firebase 开关按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61576144/