pointerLockElement return null when called immediately after requestPointerLock() function

Question

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

}

Answer 1

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');
});