04-19-2018 05:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-19-2018 05:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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!
Answered! Go to the Best Answer.

Accepted Solutions
04-19-2018 05:36
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-19-2018 05:36
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
use inline not show
batteryFull_iconHandle.style.display = "inline";
batteryEmpty_iconHandle.style.display = "none";
04-19-2018 05:36
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-19-2018 05:36
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
use inline not show
batteryFull_iconHandle.style.display = "inline";
batteryEmpty_iconHandle.style.display = "none";
04-19-2018 06:29
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-19-2018 06:29
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks so much!

04-19-2018 06:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-19-2018 06:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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";
}
04-19-2018 06:36 - edited 04-19-2018 06:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-19-2018 06:36 - edited 04-19-2018 06:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Even better solution, thanks @Cmspooner

