Home HTML: How to conditionally display an image based on the numerical difference between two text values?

Questions

HTML: How to conditionally display an image based on the numerical difference between two text values?

February 2, 2022

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:

<!doctype html>
<html lang="en">

<style>
    body {
            background-color: black;
            color: azure;
            font-size: 1.1em;
      }
    h1 {
        color: coral;
    }

</style>

<head>
    <meta charset="utf-8">
    <title>Weather Station</title>
</head>
<script>
    setInterval(connectWeatherStation, 1000);
    function connectWeatherStation(){
        fetch('data.csv') <!-- REPLACE WITH YOUR IP ADDRESS -->
        .then(response => response.text())
        .then(text => {
            var data = text.split(",");
            document.getElementById("ir_ambient").innerHTML = "IR Ambient: " + data[0];
            document.getElementById("sky_temperature").innerHTML = "IR Sky: " + data[1];
            document.getElementById("temperature").innerHTML = "Temperature: " + data[2];
            document.getElementById("humidity").innerHTML = "Humidity: " + data[3];
            document.getElementById("rain_status").innerHTML = "Rain Status: " + data[4];

            var clockElement = document.getElementById( "clock" );
            clock.innerHTML = new Date().toLocaleTimeString();
        })
    }


</script>

    <body onload="connectWeatherStation()">
        <div>
            <h1>Weather Data</h1>
            <h3 id="clock">?</h3>
            <h2 id="ir_ambient">?</h2>
            <h2 id="sky_temperature">?</h2>
            <h2 id="temperature">?</h2>
            <h2 id="humidity">?</h2>
        <h2 id="rain_status">?</h2>
        </div>
    </body>
</html>

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.

>Solution :

You can embed the image in the body with visibility set to hidden. And inside the script, set visibility conditionally.

<!doctype html>
<html lang="en">

<style>
    body {
            background-color: black;
            color: azure;
            font-size: 1.1em;
      }
    h1 {
        color: coral;
    }

</style>

<head>
    <meta charset="utf-8">
    <title>Weather Station</title>
</head>
<script>
    setInterval(connectWeatherStation, 1000);
    function connectWeatherStation(){
        fetch('data.csv') <!-- REPLACE WITH YOUR IP ADDRESS -->
        .then(response => response.text())
        .then(text => {
            var data = text.split(",");
            document.getElementById("ir_ambient").innerHTML = "IR Ambient: " + data[0];
            document.getElementById("sky_temperature").innerHTML = "IR Sky: " + data[1];
            document.getElementById("temperature").innerHTML = "Temperature: " + data[2];
            document.getElementById("humidity").innerHTML = "Humidity: " + data[3];
            document.getElementById("rain_status").innerHTML = "Rain Status: " + data[4];

            var clockElement = document.getElementById( "clock" );
            clock.innerHTML = new Date().toLocaleTimeString();

            // new code
            var irAmbient = parseFloat(data[0]);
            var skyTemperature = parseFloat(data[1]);
            if (skyTemperature-irAmbient > 20) {
                  
               document.getElementById("myImage").style.visibility = "visible";
            } else {
               document.getElementById("myImage").style.visibility = "hidden";

            }
        })
    }


</script>

    <body onload="connectWeatherStation()">
        <div>
            <h1>Weather Data</h1>
            <h3 id="clock">?</h3>
            <h2 id="ir_ambient">?</h2>
            <h2 id="sky_temperature">?</h2>
            <h2 id="temperature">?</h2>
            <h2 id="humidity">?</h2>
            <h2 id="rain_status">?</h2>
            
            <!--- new code --->
            <img id=myImage src="path-to-img" style="visibility: hidden;" />
        </div>
    </body>
</html>