title: Uncaught TypeError: 1 argument required, but only 0 present...But my function takes no arguments?
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="box1" onclick="animate()"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>