Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Hide and show img

ANSWERED

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!

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

use inline not show

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

 

Fitbit Ionic, Nokia 7 plus

View best answer in original post

Best Answer
4 REPLIES 4

use inline not show

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

 

Fitbit Ionic, Nokia 7 plus
Best Answer

Thanks so much!

Best Answer
0 Votes

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";
}
Best Answer

Even better solution, thanks @Cmspooner

Best Answer
0 Votes