Bouncing object

<html>
    <head>
        <title>Animation with Javascript, HMTL and CSS</title>

        <style>
            .container {
                width: 90%;
                height: 90%;
                background-color: azure;
                margin: auto;
                margin-top: 5%;
            }

            .object {
                width: 23px;
                height: 23px;
                background-color: coral;
                position: relative;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="container" id="container">
            <div class="object" id="object" onclick="move()"></div>
        </div>
        <span id="tracker"></span>
    </body>

    <script>
        var pos = 0;
        var direction = -1;

        function animate() {
                right_edge = document.getElementById("container").offsetWidth;
                if (pos >= right_edge-23 || pos <= 0 ) {
                    direction *= -1;
                }
                pos += direction * 10;

                document.getElementById("object").style.left = pos;
                document.getElementById("tracker").innerHTML = direction + " - " + pos;
        }


        function move() {
            setInterval(animate, 50);

        }
    </script>

</html>