Help with mobile screen orientation actions

Hello, I have made a mobile view for a simple webpage, I have one issue though I have an image where what I want to happen is when a user touches the image it goes full screen and the orientation of the screen changes from "portrait" to "landscape" and only while on a mobile device.

I have added the following code .

HTML/Blade:

<div class="Image_block" id="Image4" ontouchstart=changeOriantaion(this.id)>
                                <img src="{{URL::asset('/assets/images/slider_images/imageSize920x920.png')}}"
                                    class="d-block w-100">
</div>

JS:

function changeOriantaion(elementID){
    if(navigator.userAgentData.mobile){
        document.querySelector(`#${elementID}`).requestFullscreen()
        screen.orientation.lock("landscape")
    }
}

where the elementID is the ID of the image being touched.

While testing on chrome dev tools mobile view the image becomes full screen and I get the following error :

Uncaught (in promise) DOMException: screen.orientation.lock() is not available on this device."

This is an expected error because a desktop browser cannot change its orientation.

The following is a link to the codepen I made of this issue: Link here

When I test this on my a mobile device there is not change at all. The image does not go full screen and there is no orientation change.

can anyone help with this issue? what is missing in my code?

Thanks in advance