files/en-us/web/api/batterymanager/levelchange_event/index.md
{{ApiRef("Battery API")}}{{securecontext_header}}
The levelchange event of the {{domxref("BatteryManager")}} interface is fired when the battery {{domxref("BatteryManager.level", "level")}} property is updated.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("levelchange", (event) => { })
onlevelchange = (event) => { }
A generic {{domxref("Event")}}.
<div id="level">(battery level unknown)</div>
<div id="stateBattery">(charging state unknown)</div>
navigator.getBattery().then((battery) => {
battery.onlevelchange = () => {
document.querySelector("#level").textContent = battery.level;
if (battery.charging) {
document.querySelector("#stateBattery").textContent = `Charging time: ${
battery.chargingTime / 60
}`;
} else {
document.querySelector("#stateBattery").textContent =
`Discharging time: ${battery.dischargingTime / 60}`;
}
};
});
{{ EmbedLiveSample('Example', '100%', 40) }}
{{Specifications}}
{{Compat}}