Device Motion events Javascript

devicemotion.css

#deviceMotionVariables {
  text-align: justify;
	width: 200px;
	border: 5px solid black;
	position: absolute;
	right: 10%;
	top: 5%;
	display: none;
}

devicemotion.html

<section id="deviceMotionVariables">
	<div id="acceleration">
		<p id="accelerationX">
			a<sub>x</sub>
		</p>
		<p id="accelerationY">
			a<sub>y</sub>
		</p>
		<p id="accelerationZ">
			a<sub>z</sub>
		</p>
	</div>
	<div id="rotation">
		<p id="rotationAlpha">
			r<sub>&alpha;</sub>
		</p>
		<p id="rotationBeta">
			r<sub>&beta;</sub>
		</p>
		<p id="rotationGamma">
			r<sub>&gamma;</sub>
		</p>
	</div>
</section>

devicemotion.js

window.ondevicemotion = function(event)
{
	document.getElementById("deviceMotionVariables").style.display = "block";
	document.getElementById("accelerationX").innerHTML = "a<sub>x</sub>: " + event.accelerationIncludingGravity.x.toFixed(3);
	document.getElementById("accelerationY").innerHTML = "a<sub>y</sub>: " + event.accelerationIncludingGravity.y.toFixed(3);
	document.getElementById("accelerationZ").innerHTML = "a<sub>z</sub>: " + event.accelerationIncludingGravity.z.toFixed(3);
	if (event.rotationRate)
	{
		document.getElementById("rotationAlpha").innerHTML = "r<sub>&alpha;</sub>: " + event.rotationRate.alpha.toFixed(3);
		document.getElementById("rotationBeta").innerHTML = "r<sub>&beta;</sub>: " + event.rotationRate.beta.toFixed(3);
		document.getElementById("rotationGamma").innerHTML = "r<sub>&gamma;</sub>: " + event.rotationRate.gamma.toFixed(3);
	}
}