HTML: How to conditionally display an image based on the numerical difference between two text value-CodePudding

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 onl oad="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.

CodePudding user response：

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 onl oad="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>

CodePudding user response：

I will do that this way, to make it cleanner :

#img-selector img:first-of-type         { display:inline }
#img-selector img:last-of-type          { display:none   }
#img-selector.imgLess img:first-of-type { display:none   }
#img-selector.imgLess img:last-of-type  { display:inline }

<div id="img-selector">
  <img src="image_more.jpg" alt="image 1">
  <img src="image_less.jpg" alt="image 2">
</div>
<div>
  <h1>Weather Data</h1>
  <h3 id="clock"            > --/--/-- </h3>
  <h2 id="ir_ambient"       >IR Ambient:  <span> ? </span></h2>
  <h2 id="sky_temperature"  >IR Sky:      <span> ? </span></h2>
  <h2 id="temperature"      >Temperature: <span> ? </span></h2>
  <h2 id="humidity"         >Humidity:    <span> ? </span></h2>
  <h2 id="rain_status"      >Rain Status: <span> ? </span></h2>
</div>

const
  IP_Address_csv = 'data.csv'          //  REPLACE WITH YOUR IP ADDRESS  
, imgSelector    = document.querySelector('#img-selector')
, clock          = document.querySelector('#clock')
, irAmbient      = document.querySelector('#ir_ambient span')
, skyTemperature = document.querySelector('#sky_temperature  span')
, temperature    = document.querySelector('#temperature span')
, humidity       = document.querySelector('#humidity span')
, rainStatus     = document.querySelector('#rain_status span')
  ;

fetch(IP_Address_csv)
.then( resp => resp.text())
.then( text =>
  {
  let [ irAmbientVal, skyTemperatureVal, temperatureVal, humidityVal, ir_ambientVal ]
    = text.split(',').map(v=>isNaN(v)?v:Number(v) )

  irAmbient.textContent      = irAmbientVal
  skyTemperature.textContent = skyTemperatureVal
  temperature.textContent    = temperatureVal
  humidity.textContent       = humidityVal
  humidity.textContent       = ir_ambientVal

  clock.textContent =  new Date().toLocaleTimeString()

  imgSelector.classList.toggle('imgLess', (skyTemperatureVal - ir_ambientVal) < 21)
  })