I want to dynamically activate some checkboxes when the user enters the page. For this I am saving the IDs of the HTML checkbox elements in a service. When the user enters the page, this service is accessed and returns an array with these IDs. The active elements are checked in each loop.
this.platform.ready().then(() => {
let checboxState = this.service.checboxState;
if (checboxState !== undefined && checboxState.length > 0) {
checboxState.forEach(checbox => {
let element = document.getElementById(checbox.id) as HTMLInputElement;
element.checked = true;
});
}
});
But Iām getting this error:
Uncaught (in promise): TypeError: Cannot set property ācheckedā of null
Which can be a indicator that Javascript function is firing before DOM is loaded. If that is the case, why platform.ready()
isnāt working? I tried also with:
document.addEventListener("DOMContentLoaded",() => {}
window.onload = () => {}
but no success.
I managed to make the function work by adding a setTimeout()
before the function, so how do I correctly wait the HTML elements to load before firing the JS function?