Uncaught TypeError：1引数は必要ですが、0のみ存在します...しかし、私の関数は引数をとりません？

Question

幅と高さと背景色で空のdivを作成しようとすると、画面上でonclickという関数が呼び出されます。それは引数をとらない。私は要素をクリックしたときしかし、それは言う：「キャッチされない例外TypeError： 『を要素』 on 『のアニメーション』を実行に失敗しました：必要な1つの引数が、唯一の0存在を私は何が足りないのです

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

？

何か他のものにanimate機能の名前を変更してください。あなたは機能しませ呼び出すように思えるが、要素のanimate方法box1。

すべての

Answer 2

まず、addEventHandlerを使用！HTMLとJavascriptを混ぜて使用しないでください！

ハンドラは関数であり、関数の結果ではありません。 "animate"は関数であるため、 "animate（）"は無効です。