div not moving when onclick is triggered?_问答_开发者

div not moving when onclick is triggered?

开发者 https://www.devze.com 2023-02-06 09:30 出处：网络

Can you tell me why my JS ain\'t working? htt开发者_开发知识库p://prime.programming-designs.com/designs/map/

相关专题：css javascript

Can you tell me why my JS ain't working?

htt开发者_开发知识库p://prime.programming-designs.com/designs/map/

It's suppose to move the mark div to the mouse xy when I click in the map.

Open your console, and you'll see:

Uncaught TypeError: Cannot read property 'MouseX' of undefined

It appears that on line 33 in your javascript code, document.Show is undefined.

document.Show.MouseX.value = tempX;

And when you click, you get this:

Uncaught TypeError: Cannot read property 'style' of null

around line 52 where mark is null:

<div id="map" onclick="

mark.style.left = tempX + 'px';
mark.style.top  = tempY + 'px';

">
    <div id="mark"></div>

You can move the entire <script> tag down toward the bottom, placing it just inside the closing </body> tag so that your document.getElementById('mark'); will find the element.

Like this:

<body>
    <div id="map" onclick="

    mark.style.left = tempX + 'px';
    mark.style.top  = tempY + 'px';

    ">
        <div id="mark"></div>            
    </div>
    <script type="text/javascript">
    <!--
        var IE = document.all?true:false;
        if (!IE) document.captureEvents(Event.MOUSEMOVE)
        document.onmousemove = getMouseXY;

        var mark = document.getElementById('mark');

        var tempX = 0;
        var tempY = 0;
        function getMouseXY(e) {
            if (IE) { // grab the x-y pos.s if browser is IE
                tempX = event.clientX + document.body.scrollLeft;
                tempY = event.clientY + document.body.scrollTop;
            }
            else {  // grab the x-y pos.s if browser is NS
                tempX = e.pageX;
                tempY = e.pageY;
            }  
            if (tempX < 0){tempX = 0;}
            if (tempY < 0){tempY = 0;}

            document.Show.MouseX.value = tempX;
            document.Show.MouseY.value = tempY;
            return true;
        }
    //-->
    </script>
</body>