title: HTML: How to conditionally display an image based on the numerical difference between two text values?
body: <p>I am very new to HTML and javascript.  After several days of working on this I have come up with a web page that will read a CSV file and display the results. The CSV file contains data from a weather station. A lot to learn.  Here is the web page code:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;style&gt;
      body {
              background-color: black;
              color: azure;
              font-size: 1.1em;
        }
      h1 {
          color: coral;
      }
  
  &lt;/style&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;Weather Station&lt;/title&gt;
  &lt;/head&gt;
  &lt;script&gt;
      setInterval(connectWeatherStation, 1000);
      function connectWeatherStation(){
          fetch('data.csv') &lt;!-- REPLACE WITH YOUR IP ADDRESS --&gt;
          .then(response =&gt; response.text())
          .then(text =&gt; {
              var data = text.split(&quot;,&quot;);
              document.getElementById(&quot;ir_ambient&quot;).innerHTML = &quot;IR Ambient: &quot; + data[0];
              document.getElementById(&quot;sky_temperature&quot;).innerHTML = &quot;IR Sky: &quot; + data[1];
              document.getElementById(&quot;temperature&quot;).innerHTML = &quot;Temperature: &quot; + data[2];
              document.getElementById(&quot;humidity&quot;).innerHTML = &quot;Humidity: &quot; + data[3];
              document.getElementById(&quot;rain_status&quot;).innerHTML = &quot;Rain Status: &quot; + data[4];
  
              var clockElement = document.getElementById( &quot;clock&quot; );
              clock.innerHTML = new Date().toLocaleTimeString();
          })
      }
  
  
  &lt;/script&gt;
  
      &lt;body onload=&quot;connectWeatherStation()&quot;&gt;
          &lt;div&gt;
              &lt;h1&gt;Weather Data&lt;/h1&gt;
              &lt;h3 id=&quot;clock&quot;&gt;?&lt;/h3&gt;
              &lt;h2 id=&quot;ir_ambient&quot;&gt;?&lt;/h2&gt;
              &lt;h2 id=&quot;sky_temperature&quot;&gt;?&lt;/h2&gt;
              &lt;h2 id=&quot;temperature&quot;&gt;?&lt;/h2&gt;
              &lt;h2 id=&quot;humidity&quot;&gt;?&lt;/h2&gt;
          &lt;h2 id=&quot;rain_status&quot;&gt;?&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The element sky_temperature and the element ir_ambient are text values. I would like to convert them to floats and then subtract ir_ambient from sky_temperature.  If the difference is more than 20 I want to display a jpeg file and if less another jpeg.
  My problem is I haven't got a clue as to how to do this and where to even put it in the body section.
  Thanks for any insight.</p>