# How to get MousePosition\[\] in the cloud?  By JavaScriptExecute ?

**URL:** <https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468>\
**Category:** Questions\
**Tags:** wolfram-engine\
**Created:** [January 5, 2015, 10:47am UTC](https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468 "2015-01-05T10:47:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rolfm](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/rolfm/32/35274_2.png) [@rolfm](https://community.wolfram.com/u/rolfm)\
**Post date:** [January 5, 2015, 10:47am UTC](https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468/1 "2015-01-05T10:47:30Z")

</div>

Since `MousePosition[]` returns `$Failed` in WolframCloud I was wondering if I could use  
`CloudSystem`JavaScriptExecute` to emulate `MousePosition[]`.

But how does `JavaScriptExecute` actually work?

Suppose I want to first add a javascript function, like

```
function mouse_position()
{
    var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;

    document.Form1.posx.value = posX;
    document.Form1.posy.value = posY;

    var t = setTimeout("mouse_position()",100);

}

```

and then execute it.  
How to do it?  
Or did I overlook any documentation of `JavaScriptExecute`?

---

<div class="post-metadata">

**Author:** ![pietervanbijnen](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/pietervanbijnen/32/5316_2.png) [@pietervanbijnen](https://community.wolfram.com/u/pietervanbijnen)\
**Post date:** [January 5, 2015, 2:36pm UTC](https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468/2 "2015-01-05T14:36:23Z")

</div>

Hi Rolf,

Lets give this a try. Here is some javascript code in a html page. It picks up the mouse position when the header is clicked.

```
<!DOCTYPE html>
<html>
<body>

<h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical) 

coordinates of the mouse pointer when it was clicked.</h2>

<p><strong>Tip:</strong> Try to click different places in the heading.</p>

<p id="demo"></p>

<script>
function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById("demo").innerHTML = coords;
}
</script>

</body>
</html>

```

save this code in a text file: I named it page4.html  
now deploy it:

```
CloudDeploy[
 Import["E:\\page4.html", "Source"], "page4.html", "Permissions" -> "Public"]

```

looks something like this:

 ![clickpic.png](https://global.discourse-cdn.com/wolfram/original/2X/b/bbe3278edd2b7eb949b1d6673643625080eb7ea4.png)

note: I save the html/javascript code to a file and then use Import with “Source”. The quotes in the html are then auto escaped. If i do this manually I always make one or more mistakes (with the /")

---

<div class="post-metadata">

**Author:** ![samcarrettie](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/samcarrettie/32/29668_2.png) [@samcarrettie](https://community.wolfram.com/u/samcarrettie)\
**Post date:** [January 5, 2015, 4:00pm UTC](https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468/3 "2015-01-05T16:00:04Z")

</div>

It is a good idea to import HTML from a file, but this also would work as a string:

```
HTMLcode = "
  <!DOCTYPE html>
  <html>
  <body>
  
  <h2 onclick=\"showCoords(event)\">Click this heading to get the x \
(horizontal) and y (vertical) 
  
  coordinates of the mouse pointer when it was clicked.</h2>
  
  <p><strong>Tip:</strong> Try to click different places in the \
heading.</p>
  
  <p id=\"demo\"></p>
  
  <script>
  function showCoords(event) {
      var x = event.clientX;
      var y = event.clientY;
      var coords = \"X coords: \" + x + \", Y coords: \" + y;
      document.getElementById(\"demo\").innerHTML = coords;
  }
  </script>
  
  </body>
  </html>
  ";

```

and then:

```
CloudDeploy[HTMLcode, "page4.html", "Permissions" -> "Public"]

```

---

<div class="post-metadata">

**Author:** ![rolfm](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/rolfm/32/35274_2.png) [@rolfm](https://community.wolfram.com/u/rolfm)\
**Post date:** [January 5, 2015, 7:06pm UTC](https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468/4 "2015-01-05T19:06:18Z")

</div>

But how do I interact with _Mathematica_? I.e., how do I get the same information into the Kernel like `MousePosition[]` ?

---

<div class="post-metadata">

**Author:** ![Vitaliyk](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/vitaliyk/32/45591_2.png) [@Vitaliyk](https://community.wolfram.com/u/Vitaliyk)\
**Post date:** [January 6, 2015, 4:04pm UTC](https://community.wolfram.com/t/how-to-get-mouseposition-in-the-cloud-by-javascriptexecute/4468/5 "2015-01-06T16:04:56Z")

</div>

Rolf, our teams are considering this and related features for the future. Thanks for letting us know this is something of interest.