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>

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>

• javascript
• animation
• onclick
• arguments
• typeerror

• I'm not getting the error in Chrome v52 – evolutionxbox Commented Aug 5, 2016 at 8:33

2 Answers 2

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

First of all, use addEventHandler! Do not mix HTML and Javascript!

Then a handler has to be function, not the result of a function. As in "animate" is a function, "animate()" is void.