Hide and show img

[Giampi71]

I'having some problem to hide and show images, specifically the battery icon that I would like to replace with a red one when battery level is less than 25%.

My index.gui is

  <image x="70%" y="80%" width = "64" height = "64" display = "none" href="icons/battery_empty.png" id="battery_empty_icon"  />
  <image x="70%" y="80%" width = "64" height = "64" display = "none" href="icons/battery_full.png" id="battery_full_icon"  /> 

and indeed the pictures do not appear. I previously tried with visibility = "hidden" but no success.

Now in my javascript file I'm using

const batteryFull_iconHandle = document.getElementById('battery_full_icon');
const batteryEmpty_iconHandle = document.getElementById('battery_empty_icon');

const batteryValue = 40 //test values
if (batteryValue > 25) {
 batteryFull_iconHandle.style.display = "show";
 batteryEmpty_iconHandle.style.display = "none";
 }
 else {
 batteryFull_iconHandle.style.display = "none";
 batteryEmpty_iconHandle.style.display = "show";
 } 

But nothing shows up

Any hint?

Thanks a lot!

[Besen · Accepted solution]

use inline not show

 batteryFull_iconHandle.style.display = "inline";
 batteryEmpty_iconHandle.style.display = "none";

[Giampi71]

Thanks so much!

[Cmspooner]

You can use a single element and change the href. 

battery_iconHandle = document.getElementById('battery_icon');

const batteryValue = 40 //test values
if (batteryValue > 25) {
  battery_iconHandle.href = "icons/battery_full.png";
}
else {
  battery_iconHandle.href = "icons/battery_empty.png";
} 

[Giampi71]

Even better solution, thanks @Cmspooner