title: Trouble using number variable from Firebase on website
body: <p>I am new to HTML and Firebase but I am working on a simple project to make a small website to display data from my ESP32. I want to receive a variable from firebase and use it in a function. In particular I want to use it to set the value of a gauge on the website. This requires the input to be a numbers.</p>
  <p>This is the code I use to get the variable and attach it to &quot;reading-float&quot;:</p>
  <pre><code>databaseFloat.on('value', (snapshot) =&gt; {
      floatReading = snapshot.val();
      console.log(floatReading);
      document.getElementById(&quot;reading-float&quot;).innerHTML = floatReading;
      }, (errorObject) =&gt; {
      console.log('The read failed: ' + errorObject.name);
      });
  </code></pre>
  <p>I can then display it on the website using:</p>
  <p>Reading float: </p>
  <p>The following line of code lets me update the gauge to display a value of 25%. I would like to enter the variable from firebase here:</p>
  <pre><code>setGaugeValue(gaugeElement, .25);
  </code></pre>
  <p>However, using  in a function does not work. No error just the function does not perform the operation.</p>
  <p>The following link is the tutorial I followed to get the website working:
  <a href="https://randomnerdtutorials.com/esp32-firebase-realtime-database/" rel="nofollow noreferrer">https://randomnerdtutorials.com/esp32-firebase-realtime-database/</a></p>
  <p>The following link is the tutorial I followed to get the gauge working with manually entered numbers:
  <a href="https://www.youtube.com/watch?v=FnUkVcQ_3CQ&amp;ab_channel=dcode" rel="nofollow noreferrer">https://www.youtube.com/watch?v=FnUkVcQ_3CQ&amp;ab_channel=dcode</a></p>
  <pre><code>    // Complete Project Details at: https://RandomNerdTutorials.com/
  
      // Database Paths
      var dataFloatPath = 'test/float';
      var dataIntPath = 'test/int';
  
      // Get a database reference 
      const databaseFloat = database.ref(dataFloatPath);
      const databaseInt = database.ref(dataIntPath);
  
      // Variables to save database current values
      var floatReading;
      var intReading;
  
      // Attach an asynchronous callback to read the data
      databaseFloat.on('value', (snapshot) =&gt; {
        floatReading = snapshot.val();
        console.log(floatReading);
        document.getElementById(&quot;reading-float&quot;).innerHTML = floatReading;
      }, (errorObject) =&gt; {
        console.log('The read failed: ' + errorObject.name);
      });
  
      databaseInt.on('value', (snapshot) =&gt; {
        intReading = snapshot.val();
        console.log(intReading);
        document.getElementById(&quot;reading-int&quot;).innerHTML = intReading;
      }, (errorObject) =&gt; {
        console.log('The read failed: ' + errorObject.name);
      });
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.gauge{
      width: 100%;
      max-width: 250px;
      font-family: 'Roboto', sans-serif;
      font-size: 40px;
      color: #262273;
  }
  
  .gauge__body{
      width: 100%;
      height: 0;
      padding-bottom: 50%;
      background: #e0d5b4;
      position: relative;
      border-top-left-radius: 100% 200%;
      border-top-right-radius: 100% 200%;
      overflow: hidden;
  }
  
  .gauge__fill{
      position: absolute;
      top: 100%;
      left: 0;
      width: inherit;
      height: 100%;
      background: #262273;
      transform-origin: center top;
      transform: rotate(0.25turn);
      transition: transform 0.2s ease-out;
  }
  
  .gauge__cover{
      width: 75%;
      height: 150%;
      background: white;
      border-radius: 50%;
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translateX(-50%);
  
      /* Text */
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 25%;
      box-sizing: border-box;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- Complete Project Details at: https://RandomNerdTutorials.com/ --&gt;
  &lt;!-- use &quot;firebase deploy&quot; in terminal to go live --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;ESP Firebase Demo App&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
  
      &lt;!-- The core Firebase JS SDK is always required and must be listed first --&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- TODO: Add SDKs for Firebase products that you want to use
          https://firebase.google.com/docs/web/setup#available-libraries --&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js&quot;&gt;&lt;/script&gt;
  
      &lt;script&gt;
      // REPLACE WITH YOUR web app's Firebase configuration
      var firebaseConfig = {
    apiKey: &quot;adsadfjsalkfljsnacjlancslnlkcmsaa&quot;,
    authDomain: &quot;esp32-firebase-demo-345678.firebaseapp.com&quot;,
    databaseURL: &quot;https://esp32-firebase-demo-345678-default-rtdb.firebaseio.com&quot;,
    projectId: &quot;esp32-firebase-demo-5ce9c&quot;,
    storageBucket: &quot;esp32-firebase-demo-5ce9c.appspot.com&quot;,
    messagingSenderId: &quot;249642534794&quot;,
    appId: &quot;1:249642534794:web:53752b5af17855daf96a73&quot;
  };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      var database = firebase.database();
  &lt;/script&gt;
  &lt;script src=&quot;app.js&quot; defer&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;ESP32 Firebase Web App Example Index&lt;/h1&gt; 
      &lt;p&gt;Reading int: &lt;span id=&quot;reading-int&quot;&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;p&gt;Reading float: &lt;span id=&quot;reading-float&quot;&gt;&lt;/span&gt;&lt;/p&gt;
  
      &lt;div class=&quot;gauge&quot;&gt;
          &lt;div class=&quot;gauge__body&quot;&gt;
              &lt;div class=&quot;gauge__fill&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;gauge__cover&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
  
          const gaugeElement = document.querySelector(&quot;.gauge&quot;);
  
          function setGaugeValue(gauge, value){
              gauge.querySelector(&quot;.gauge__fill&quot;).style.transform = `rotate(${value/2}turn)`;
              gauge.querySelector(&quot;.gauge__cover&quot;).textContent = `${Math.round(value*100)}%`;
          }
          setGaugeValue(gaugeElement, .25);
      &lt;/script&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>