javascript - JAVASCRIT: Uncaught TypeError: Cannot read property 'pageX' of undefined in console of the browsers

Question

I have this code, but I get an issue when executing it which says: "Uncaught TypeError: Cannot read property 'pageX' of undefined"

The issue is in this part apparently:

        var tempX = 0;
        var tempY = 0;

        if (IE) { //para IEenter code here
            tempX = event.clientX + document.body.scrollLeft;
            tempY = event.clientY + document.body.scrollTop;
        } else { //para netscape
            tempX = event.pageX;
            tempY = event.pageY;
        }

I want catch the value of event.PageX but throws the issue that is undefined, but if I am declaring the variable And this is el complete code:

<style>
    {
        box-sizing: border-box;
    }

    /*Crea una capa nueva por encima, si tenemos una con valor 2 estará a una altura o por encima de una con 
                valor 1*/
    .img-zoom-container {
        position: relative;
        z-index: 1;

    }

    .img-zoom-lens {
        position: absolute;
        border: 1px solid #d4d4d4;
        z-index: 3;

        /*set the size of the lens:*/
        width: 40px;
        height: 40px;
    }

    .img-zoom-result {
        position: absolute;
        z-index: 2;
        top: 10%;
        border: 1px solid #d4d4d4;
        /*set the size of the result div:*/
        width: 300px;
        height: 300px;
    }

</style>



<script>
    function imageZoom(imgID, resultID) {
        var img, lens, result, cx, cy;
        img = document.getElementById(imgID);
        result = document.getElementById(resultID);
        /*create lens:*/
        lens = document.createElement("DIV");
        lens.setAttribute("class", "img-zoom-lens");
        /*insert lens:*/
        img.parentElement.insertBefore(lens, img);
        /*calculate the ratio between result DIV and lens:*/
        cx = result.offsetWidth / lens.offsetWidth;
        cy = result.offsetHeight / lens.offsetHeight;
        /*set background properties for the result DIV:*/
        result.style.backgroundImage = "url('" + img.src + "')";
        result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
        /*execute a function when someone moves the cursor over the image, or the lens:*/
        lens.addEventListener("mousemove", moveLens);
        img.addEventListener("mousemove", moveLens);
        /*and also for touch screens:*/
        lens.addEventListener("touchmove", moveLens);
        img.addEventListener("touchmove", moveLens);

        function moveLens(e) {
            var pos, x, y;
            /*prevent any other actions that may occur when moving over the image:*/
            e.preventDefault();
            /*get the cursor's x and y positions:*/
            pos = getCursorPos(e);
            /*calculate the position of the lens:*/
            x = pos.x - (lens.offsetWidth / 2);
            y = pos.y - (lens.offsetHeight / 2);
            /*prevent the lens from being positioned outside the image:*/
            if (x > img.width - lens.offsetWidth) {
                x = img.width - lens.offsetWidth;
            }
            if (x < 0) {
                x = 0;
            }
            if (y > img.height - lens.offsetHeight) {
                y = img.height - lens.offsetHeight;
            }
            if (y < 0) {
                y = 0;
            }
            /*set the position of the lens:*/
            lens.style.left = x + "px";
            lens.style.top = y + "px";
            /*display what the lens "sees":*/
            result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
        }

        function getCursorPos(e) {
            var a, x = 0,
                y = 0;
            e = e || window.event;
            /*get the x and y positions of the image:*/
            a = img.getBoundingClientRect();
            /*calculate the cursor's x and y coordinates, relative to the image:*/
            x = e.pageX - a.left;
            y = e.pageY - a.top;
            /*consider any page scrolling:*/
            x = x - window.pageXOffset;
            y = y - window.pageYOffset;
            return {
                x: x,
                y: y
            };
        }
    }

    function showdiv(event) {
        //determina un margen de pixels del div al raton
        margin = 5;

        //La variable IE determina si estamos utilizando IE
        var IE = document.all ? true : false;
        //Si no utilizamos IE capturamos el evento del mouse
        if (!IE) document.captureEvents(Event.MOUSEMOVE);

        var tempX = 0;
        var tempY = 0;

        if (IE) { //para IE
            tempX = event.clientX + document.body.scrollLeft;
            tempY = event.clientY + document.body.scrollTop;
        } else { //para netscape
            tempX = event.pageX;
            tempY = event.pageY;
        }
        if (tempX < 0) {
            tempX = 0;
        }
        if (tempY < 0) {
            tempY = 0;
        }

        document.getElementById('myresult').style.top = (tempY + margin);
        document.getElementById('myresult').style.left = (tempX + margin);
        document.getElementById('myresult').style.display = 'block';
        return;
    }

</script>



<div class="img-zoom-container">
    <a onmousemove="showdiv(event);"><img id="myimage" src="https://www.proyevit.com/wp-content/uploads/2021/01/Lotizacion-Plaza-Asturias-scaled.jpg" width="75%" height="auto"></a>

    <div id="myresult" class="img-zoom-result"></div>
</div>




<script>
    // Initiate zoom effect:
    imageZoom("myimage", "myresult");
    showdiv(Event.MOUSEMOVE);

</script>

question from:https://stackoverflow.com/questions/65944834/javascrit-uncaught-typeerror-cannot-read-property-pagex-of-undefined-in-cons

Answer 1

Waitting for answers