Uncaught TypeError: 1 Argument erforderlich, aber nur 0 vorhanden ... Aber meine Funktion braucht keine Argumente?

Question

Ich versuche, eine leere div mit einer Breite und Höhe und Hintergrundfarbe über den Bildschirm bewegen eine Funktion onclick aufrufen. Es braucht keine Argumente. Aber wenn ich auf das Element heißt es: „Nicht abgefangene Typeerror: Fehler beim Ausführen 'beseelt' auf 'Element':.? 1 Argument erforderlich, aber nur 0 vorhanden Was bin ich

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

Versuchen animate Funktion, um etwas anderes zu benennen. Scheint, als ob Sie nicht Ihre Funktion aufrufen, aber animate Methode des Elements box1.

Answer 2

Zunächst einmal addEventHandler verwenden! Sie HTML und Javascript nicht mischen!

Dann muss ein Handler funktionieren, nicht das Ergebnis einer Funktion. Wie in "animate" ist eine Funktion, "animate()" ist ungültig.