Uncaught TypeError: 1 argument required, but only 0 present...But my function takes no arguments?

Question

Im trying to make an empty div with a width and height and background-color move across the screen calling a function onclick. It takes no arguments. But when i click the element it says: "Uncaught TypeError: Failed to execute 'animate' on 'Element': 1 argument required, but only 0 present. What am i missing?

var container = document.getElementById('container');
var box1 = document.getElementById('box1');
var containerWidth = container.clientWidth;
var box1Width = box1.clientWidth;

function animate() {
    box1.style.left = '0px';
    setTimeout(function() {
        box1.style.transition = 'left 1000ms ease';
        box1.style.left = containerWidth - box1Width + 'px';
    }, 1);
}

body {
    margin: 0;
}

#container {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: aqua;
}

#box1 {
    position: relative;
    height: 100px;
    width: 100px;
    left: 0px;
    background-color: yellow;
}

<div id="container">
  <div id="box1" onclick="animate()"></div>
</div>

Answer 1

Try to rename animate function to something else. Seems like you call not your function, but animate method of element box1.