deviceMotionEvent.acceleration properties returning null in mobile browser

Question

I'm trying to detect acceleration of a mobile device. I've already tried using Accelerometer and now I'm also trying deviceMotionEvent. Whenever I print the properties event.acceleration.x, .y, or .z either in html or console, I'd get null. It would be much appreciated if anyone could help me see what I'm doing wrong. When I check sites in browser to see if my device can use accelerometer or deviceMotionEvent, it works there so it's not that my device can't handle it. Here's an iteration pieced together from many google searches I have from body:

    <p id="test"> nothing </p>
    <script>
        function motion(event) {
            document.getElementById("test").innerHTML = "acceleration x:" + event.acceleration.x;

            console.log("Accelerometer: "
                + event.acceleration.x + ", "
                + event.acceleration.y + ", "
                + event.acceleration.z
            );
        }

        if (window.DeviceMotionEvent) {
            window.addEventListener("devicemotion", motion, false);
            document.getElementById("test").innerHTML = "eventlistner added"
        } else {
            document.getElementById("test").innerHTML = "sadness it won't work";
            console.log("DeviceMotionEvent is not supported");
        }
    </script>

The text on the doc ends up being "acceleration x:null". Insight is appreciated. Thank you!