Editing Device orientation on the browser

To detect the motion of devices where the web browser is running, using Javascript, we rely on the
<code> window.addEventListener("devicemotion")</code> that listens to the motion of the device.

=Example=
See it running in: http://publicationstation.wdka.hro.nl/motion/


==code==
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<title>Acess browser accelerometer</title>
</head>

<body>
<div id="status"><a href=\"http://www.w3.org/TR/orientation-event/">http://www.w3.org/TR/orientation-event/</a> is supported.</div>
<br/><br/>
    <div id="accelerometer">
    <p><b>X</b>: <div id="x"></div></p>
    <p><b>Y</b>: <div id="y"></div></p>
    <p><b>Z</b>: <div id="z"></div></p>
</div>
    <br/><br/>
    
<p>Example based on<a href="https://github.com/altermarkive/Learning-Sensor-Access-in-JS">Learning Sensor Access in JS</a> by altermarkive.</p>



<script type="text/javascript">

function motion(event){
    $("div#x").html(event.accelerationIncludingGravity.x);
    $("div#y").html(event.accelerationIncludingGravity.y);
    $("div#z").html(event.accelerationIncludingGravity.z);
}


function go(){
  if(window.DeviceMotionEvent){
      window.addEventListener("devicemotion", motion, false);
      // window.addEventListener does:
      // * listen to device motion
      // * at every update run motion function, to update the html
  }else{
    var status = document.getElementById("status");
    status.innerHTML = status.innerHTML.replace(
      "is supported", "is not supported"
    );
  }
}

$(document).ready(function(){
    go();
})


</script>

</body>
</html>

</source>