How to Embed the Positioning Javasscript of the Mouse Cursor in the Developer Tool

Asked 1 years ago, Updated 1 years ago, 34 views

This is my first time to ask a question.
I'm trying to use Chrome or Firefox's developer tool to display the current coordinates of the mouse cursor anywhere.I opened the developer tool by displaying the site and added the following elements to the appropriate location of html:

<div>
X:<input id="mouthX"></input>
Y:<input id="mouthY"></input>
</div>

The above is displayed safely.Now, I inserted the following code directly under the body tag with the script tag.

<script>
reload = function() {
    fieldX= document.getElementById("mouthX");
    fieldY= document.getElementById("mouthY");
    document.onmousemove=function(evt){
        if( document.all&!window.opera){
            fieldX.value=window.event.clientX;
            fieldY.value = window.event.clinetY;
        } else {
            fieldX.value=evt.pageX;
            fieldY.value=evt.pageY;
        }
    };
}
</script>

I felt like it was not working, but it didn't work, so I deleted the online=function(){} but it didn't work.If I spend more time researching or understanding the basics of JavaScript more deeply from scratch, I don't think I understand the basics, but now that I understand it, it will take some time, so I would like to ask for your advice.

I would appreciate it if someone could lend me some advice.Thank you for your cooperation.

javascript

2022-09-30 21:02

2 Answers

reload=function();

Do you have multiple codes written above?
If you enter more than one online (window.onload), it will be overwritten with the code you entered later, and the first online will not run.

So, if you have more than one online, try to do it all together.
Or

<script>
    reload = function() {
        foo();// Called by another name
    }

    var foo = function() {
        fieldX= document.getElementById("mouthX");
        fieldY= document.getElementById("mouthY");
        document.onmousemove=function(evt){
            if( document.all&!window.opera){
                fieldX.value=window.event.clientX;
                fieldY.value = window.event.clinetY;
            } else {
                fieldX.value=evt.pageX;
                fieldY.value=evt.pageY;
            }
        };
    }
</script>

Please call me with another name instead of online.

By the way, as the name suggests, online means to run after loading the HTML file.
Therefore, the reason why I removed the online and failed is that I couldn't find it because I haven't finished reading the HTML file yet and I'm looking for mouseX or mouseY elements.

If you want to remove the reload and run it, try testing it after the <body></body> tag.

The contents of the function itself worked fine in my environment.


2022-09-30 21:02

Will the code of the script tag inserted in the development tool be executed?
It may depend on the browser, but it doesn't seem to be running on Firefox.
If you want to run JavaScript, you'd better type in a conversation environment called a "console."

Now, if you run the question code on the console, I think you can substitute the function on load.
However, as Ke Na's response pointed out, it is at a specific time that the reload is performed.
You won't be able to hit the console in time, so I think you missed this timing.

onload();

and so on. (If you run it on the console of the development tool, it may not make much sense to replace it with online.)


2022-09-30 21:02

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.