Not able to toggle Fullscreen button in openLayers

Question

I am implementing fullscreen feature. I need to toggle fullscreen button in below 2 scenarios

1. When fullscreen mode is false, I need to dispaly "fullscreen(as per code)" button on map. Which is working properly.

2. When fullscreen mode is true, I need to display "exitfullscreen(as per code)" button on map. Which is not working.

I have added the code which I have tried.

const fullscreen = document.createElement('span');
fullscreen.innerHTML = '<img src="fullscreen.png" width="20" height="20">';
document.addEventListener('change', (event) => {
if(document.fullscreenElement){
fullscreen.innerHTML = '<img src="fullscreen" width="20" height="20">';
  }else{
    fullscreen.innerHTML = '<img src="exitfullscreen.png" width="20" height="20">';
  }
})

Answer 1

You should define two span elements and OpenLayers will use the correct one depending on the status

const fullscreen = document.createElement('span');
fullscreen.innerHTML = '<img src="fullscreen.png" width="20" height="20">';

const exitfullscreen = document.createElement('span');
exitfullscreen.innerHTML = '<img src="exitfullscreen.png" width="20" height="20">';

new ol.control.FullScreen({
  label: fullscreen,
  labelActive: exitfullscreen,
})