title: Firebase switch button
body: <p>So i'm trying to make a realtime button using Javascript and Firebase. Currently I have a working button which is changing the variable in the realtime database from on to off. But the default value isn't saved so when I switch the button off and reload the page it shows that it is on how can I fix this? I also want it to be updated realtime between all the clients</p>
  
  <p>App.js</p>
  
  <pre><code>(function() {    
      //Get elements
      const preObject = document.getElementById('object');
  
      // Create reference
      dbRefObject = firebase.database().ref().child('button').child('value')
  
      // Sync changes
      dbRefObject.on('value', snap =&gt; 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');
        }
      });
    });
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"&gt;&lt;/script&gt;
  
      &lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
      &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;Toggle Switch&lt;/h2&gt;
  
      &lt;label class="switch"&gt;
          &lt;input type="checkbox" id="checkbox" checked&gt;
          &lt;div class="slider"&gt;&lt;/div&gt;
      &lt;/label&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>