Why doesn't my panorama switch button work?

I'm trying to make a button so that it is tied to a specific location in the panorama. That is, the button should not rotate when the user views a 360-degree panorama.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>panoramas</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <style>
        #switchButton {
            cursor: pointer;
        }
    </style>
</head>
<body>
<a-scene>
    <a-assets>
        <img id="panorama1" src="1.jpg">
        <img id="panorama2" src="2.jpg">
    </a-assets>

    <a-sky id="panorama" src="#panorama1" rotation="0 -130 0"></a-sky>

    <a-entity id="cameraRig">
        <a-camera></a-camera>
    </a-entity>

    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC" id="switchButton"></a-plane>
</a-scene>

<script>
    const button = document.querySelector('#switchButton');
    let currentPanorama = 1;

    button.addEventListener('mouseenter', () => {
        const panorama = document.querySelector('#panorama');
        if (currentPanorama === 1) {
            panorama.setAttribute('src', '#panorama2');
            currentPanorama = 2;
        } else {
            panorama.setAttribute('src', '#panorama1');
            currentPanorama = 1;
        }
    });
</script>
</body>
</html>

I'm trying to make a button so that it is tied to a specific location in the panorama. That is, the button should not rotate when the user views a 360-degree panorama.

Solution

I solve your question
What you need to do is add a cursor to handle the onlcick event, it's the only way to do that.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame HTML Shader - Dynamic</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
    <script>
        let currentPanorama = 1;
        AFRAME.registerComponent("click-log", {
            init: function () {
                this.myFunction = function () {
                    const panorama = document.querySelector('#panorama');
                    if (currentPanorama === 1) {
                        panorama.setAttribute('src', '#panorama2');
                        currentPanorama = 2;
                    } else {
                        panorama.setAttribute('src', '#panorama1');
                        currentPanorama = 1;
                    }
                };

                this.el.addEventListener("click", this.myFunction);
            },

            remove: function () {
                this.el.removeEventListener("click", this.myFunction);
            }
        });

    </script>
</head>

<body>
    <a-scene update-html>

        <a-camera>
            <a-cursor material="color: red"></a-cursor>
        </a-camera>

        <a-assets>
            <img id="panorama1"
                src="https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg">
            <img id="panorama2" src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg">
        </a-assets>

        <a-sky id="panorama" src="#panorama1" rotation="0 -130 0"></a-sky>

        <a-entity id="cameraRig">
            <a-camera></a-camera>
        </a-entity>

        <a-plane click-log position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC"
            id="switchButton"></a-plane>

    </a-scene>
</body>
</html>