dcsimg
Results 1 to 2 of 2

Thread: [RESOLVED] Javascript problem

  1. #1

    Thread Starter
    Member
    Join Date
    Jan 2013
    Posts
    59

    Resolved [RESOLVED] Javascript problem

    Having a bit of trouble with some JS code I have. Can't seem to get it working properly and I've been staring at it that long that I can't see the problem. I know it'll be a quick fix so was just hoping for another set of eyes to have a look.

    Basically just getting the mouse click x & y coordinates and printing them along with crosshairs of where they meet.

    Thanks in advance, the problem is 100% with the JS code but I'll put the HTML in too

    HTML:
    Code:
    <div class="content">
    
        <div class="content-constrained">
    
            <h1>
                Interactive
            </h1>
    
    
            <div class="area">
                <p class="area-copy">Click anywhere within this div to see the co-ordinates of the cursor with respect to this div.</p>
                <div class="area-xPos"><!-- --></div>
                <div class="area-yPos"><!-- --></div>
            </div>
    
            <p class="area-data">
                xPos: <span class="xPos"></span><br />
                yPos: <span class="yPos"></span>
            </p>
    
            <p class="area-data">
                <button class="reset">Reset</button>
            </p>
    
        </div>
    
    </div>
    
    @section scripts {
    
        <script src="~/js/main.js"></script>
    
        <environment names="Development">
            <script src="~/js/interactive.js"></script>
        </environment>
        <environment names="Staging,Production">
            <script src="~/js/interactive.min.js"></script>
        </environment>
    
    }
    JS:
    Code:
    function getClickPosition() {
    
    
        var area = document.querySelector(".area");
    
        var xPosData = document.querySelector(".xPos");
    
        var yPosData = document.querySelector(".yPos");
    
        var reset = document.querySelector(".reset");
    
        var areaXPos = document.querySelector(".area-xPos");
    
        var areaYPos = document.querySelector(".area-yPos");
    
        }
    
        area.addEventListener("click", getPosition);
    
    
        reset.addEventListener("click", function (event) {
    
            xPosData.innerText = "0";
    
            yPosData.innerText = "0";
    
            areaXPos.style.left = "-1px";
    
            areaYPos.style.top = "-1px";
    
        });
    
    
    
        function getPosition(event, el) {
    
    
    
            var xPosData = el.clientX;
    
            var yPosData = el.clientY;
    
            var elPos = el.getBoundingClientRect();
    
    
    
            return {
    
                x: Math.floor(xPos),
    
                y: Math.floor(yPos)
            };
        }

  2. #2
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    21,924

    Re: [RESOLVED] Javascript problem

    Is that resolved now?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width