PointerLockElement returns null when called immediately after requestPointerLock() function
domElement.onclick = () => { // requestPointerLock() needs to be called by user input
domElement.requestPointerLock = domElement.requestPointerLock || domElement.mozRequestPointerLock;
domElement.requestPointerLock();
console.log(document.pointerLockElement || document.mozPointerLockElement); // return null
}
Check out the docs:
The Element.requestPointerLock() method lets you asynchronously ask for the pointer to be locked on the given element.
Asynchronous means, that you cannot call those lines after another:
domElement.requestPointerLock();
document.pointerLockElement || document.mozPointerLockElement;
In the moment the second line is executed, the first statement might not be finished yet.
The docs also mention:
To track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events at the Document level.
Use an implementation as shown in the pointerlockchange docs:
document.addEventListener('pointerlockchange', (event) => {
console.log('Pointer lock changed');
});