How to get a Web Element Coordinates on the Screen

Many years ago, I worked on a web-browser to implement a feature where I needed to know the coordinates of a web input element on the screen. The web-browser was written in C and its underlying DOM APIs were missing some newer features that would make doing this easier in the latest DOM APIs but at the same time the implementation should work in many more older browsers.

Because I thought to myself that this trick/implementation is somewhat unique and maybe non-existent on the internet, I wrote it in Javascript. The only requirement I can think of for doing this is that you need to register a mouse event listener since I don’t know of any other way for this to be possible.

So I will just get down to it and finish the post by just showing the Javascript code.