navigator.getBattery cannot be found

Question

I made a program that would list the battery level and charging into a div. My code is below. For some reason, when I run it, it tells me that navigator.getBattery is not a function. How can I fix this?

function batttick() {
  navigator.getBattery().then( a=>{
    let m = ""
    let c = ""
    m = battery.level * 100 + "%"
  
    if(a.charging) {
      m+=" ⚡";
      c = "green";
    }
    console.log(c, m);
    document.getElementById("batt").innerHTML = m;
    document.getElementById("batt").style.color = c;
    })
} 
batttick()

What kind of program is this? I do not get this error in a browser. — Ben Alan, Apr 16 '22 at 01:07
Inside the promise when you do 'a =>', the promise returns the object and you are assigning it to 'a', you never assign a 'battery' variable. — Jason Goemaat, Apr 16 '22 at 01:07

score 2 · Answer 1 · edited Apr 21 '22 at 23:39

The error that you are getting is not coming up when running on Google Chrome (version 100).

It looks like a few browsers don't support navigator.getBattery(). See the browser compatibility on MDN, or see the table below.

Browser	Versions
Chrome	✅ (>38)
Edge	✅ (>79)
Firefox	❌ (43-52)
IE	❌ (no support)
Opera	✅ (>25)
Safari	❌ (no support)

^{Key: ✅ = Supported, ❌ = Not supported.}

If you notice that the browser that you are using isn't supported, you should upgrade or switch it, run the code, and it should work then.

Also, another problem in your code is that you are trying to get battery.level, when battery doesn't exist. This will likely throw an error.

It looks like you want to use the returned BatteryManager object, in this case, a. So, to fix it, simply use the code below.

const m = a.level * 100 + "%";

This is now getting the level property from the already-defined a variable. When you change your code to this, it should work correctly.

score 1 · Accepted Answer · answered Apr 21 '22 at 23:43

You had an issue where you were using a variable a but were referencing battery. See my edits and working demo:

function batttick() {
  navigator.getBattery().then(battery => {
    let m = ""
    let c = ""
    m = battery.level * 100 + "%"

    if (battery.charging) {
      m += " ⚡";
      c = "green";
    }
    console.log(c, m);
    document.getElementById("batt").innerHTML = m;
    document.getElementById("batt").style.color = c;
  })
}
batttick()

<div id="batt"></div>

navigator.getBattery cannot be found

2 Answers2