The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> HTML, Battery Level
s1lv3rf0x87
post Jan 18 2017, 06:38 AM
Post #1





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270
Hey Guys,

I have some HTML code which will display the battery status of a device and display the charge as a decimal value.

I am trying to tweak the code so it displays the charge value as a percentage and not a decimal value.

Can someone have a look at this and advise if this is possible and if so how to do this.

Many Thanks in advance.

CODE
<html>
<head>
  <title>Battery Status API Example</title>
  <script>
    window.onload = function () {
      function updateBatteryStatus(battery) {
        document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
        document.querySelector('#level').textContent = battery.level;
        document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
      }

      navigator.getBattery().then(function(battery) {
        // Update the battery status initially when the promise resolves ...
        updateBatteryStatus(battery);

        // .. and for any subsequent updates.
        battery.onchargingchange = function () {
          updateBatteryStatus(battery);
        };

        battery.onlevelchange = function () {
          updateBatteryStatus(battery);
        };

        battery.ondischargingtimechange = function () {
          updateBatteryStatus(battery);
        };
      });
    };
  </script>
</head>
<body>
  <div id="charging">(charging state unknown)</div>
  <div id="level">(battery level unknown)</div>
  <div id="dischargingTime">(discharging time unknown)</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
pandy
post Jan 18 2017, 07:04 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
Can't you just multiply the value with 100? I don't follow the script, assume there is more to it than shown here? But I'm guessing battery.level * 100 .

And this is JavaScript, not HTM. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 07:12 AM
Post #3





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270
QUOTE(pandy @ Jan 18 2017, 12:04 PM) *

Can't you just multiply the value with 100?


Hi Pandy,

Thank you for your response.

My HTML skills are quite poor at the moment and I am still learning.

I managed to find this code which works but I need a percentage not a decimal value. I am not sure what part of the code I should be multiplying by 100 in order to get it to display as a percentage.

If you could advise or give a working solution that would be ideal.

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 07:15 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
Sorry, I edited my post above but you had time to post while I did.

I'm guessing you should do it here, but I don't understand the script, so just a guess.

CODE
document.querySelector('#level').textContent = battery.level * 100;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 07:22 AM
Post #5





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270
QUOTE(pandy @ Jan 18 2017, 12:15 PM) *

Sorry, I edited my post above but you had time to post while I did.

I'm guessing you should do it here, but I don't understand the script, so just a guess.

CODE
document.querySelector('#level').textContent = battery.level * 100;



Hi Pandy,

Thanks for that I have done what you have suggested and it now displays the value without the percentage sign.

This is a step in the right direction I just need the percentage sign to be displayed now.

I am guessing it will be in this same location but not sure how to format.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 07:40 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
OK, a little JS lesson in place then. You quote string values but not variables and operators. You can concatenate the two with +.


So try this.
CODE
document.querySelector('#level').textContent = battery.level * 100 + ' %';


Added a space before the percent sign. Remove the space if you don't want it like that.


+ is both a math operator and and a string operator used to concatenate strings. JavaScript understands from the context how to use it.

If we have this...
var foo = 100 + 100 + ' $';
alert(foo);

... JavaScript will add the two numbers and concatenate the result with the dollar sign. Clever huh? happy.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 07:49 AM
Post #7





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270
QUOTE(pandy @ Jan 18 2017, 12:40 PM) *

OK, a little JS lesson in place then. You quote string values but not variables and operators if you do some math. You can concatenate the two with +.

+ is both a math operator and and a string operator used to concatenate strings. JavaScript understands from the context how to use it.


So try this.
CODE
document.querySelector('#level').textContent = battery.level * 100 + ' %';


Added a space before the percent sign. Remove the space if you don't want it like that.


Thanks Pandy you are a star.

That works perfectly. I don't suppose you could help me out tweak this code a little further.

I have been asked to change the display charge status so when the battery level reaches 100% to display Fully Charged.

Is that something you could help me with?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 08:36 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
QUOTE(s1lv3rf0x87 @ Jan 18 2017, 01:49 PM) *


I have been asked to change the display charge status so when the battery level reaches 100% to display Fully Charged.

Is that something you could help me with?



I think this would work. Only the #level line is changed. I moved it last for clearity

CODE

document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
if (battery.level != 100)
   document.querySelector('#level').textContent = battery.level * 100 + ' %';
else
   document.querySelector('#level').textContent = 'Fully Charged';
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
s1lv3rf0x87   HTML, Battery Level   Jan 18 2017, 06:38 AM
pandy   Can't you just multiply the value with 100? I ...   Jan 18 2017, 07:04 AM
s1lv3rf0x87   Can't you just multiply the value with 100? ...   Jan 18 2017, 07:12 AM
pandy   Sorry, I edited my post above but you had time to ...   Jan 18 2017, 07:15 AM
s1lv3rf0x87   Sorry, I edited my post above but you had time to...   Jan 18 2017, 07:22 AM
pandy   OK, a little JS lesson in place then. You quote st...   Jan 18 2017, 07:40 AM
s1lv3rf0x87   OK, a little JS lesson in place then. You quote s...   Jan 18 2017, 07:49 AM
pandy   I have been asked to change the display charge s...   Jan 18 2017, 08:36 AM
s1lv3rf0x87   I have been asked to change the display charge ...   Jan 18 2017, 10:22 AM
pandy   I forgot to quote. Here I tell you all about quote...   Jan 18 2017, 11:18 AM
pandy   And I forgot that the battery level isn't in p...   Jan 18 2017, 11:22 AM
Christian J   Note that browser support still seems very limited...   Jan 18 2017, 08:09 AM
pandy   Jesus, it's a JavaScript method! I didn...   Jan 18 2017, 08:23 AM
pandy   The sample at the top of the page at CanIUse must ...   Jan 18 2017, 08:28 AM
Christian J   I tried to run the script locally on my phone and...   Jan 18 2017, 03:33 PM
pandy   Yeah, but I don't get a choice of browser. It ...   Jan 18 2017, 04:30 PM
pandy   Oh, you asked about JS. I thought you said HTML. W...   Jan 18 2017, 04:42 PM

« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 10:51 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC