I want the red ball to bounce. Why isn't it working?

Question

https://code.sololearn.com/WTQ64qF5e9SY/?ref=app

Answer 1

Add function definition out side onload but in onload..

edit:
function bounce() {
//..
}

window.onload = () => {
bounce()
};

Answer 2

Lego in Motion

Why there is 2 times height, 2 times weight, 2 times bottom in JS section?

Answer 3

Lego in Motion
I modified your animation to use only css animation

https://code.sololearn.com/WO86cE4h1iUH/?ref=app

Answer 4

What did you changed? It just worked but not now?
edit: Lego in Motion
function working fine. but problem may in setting values.. what are you trying actually?

edit: add it in reverse..

Answer 5

Add in reverse

window.onload = () => {
bounce()
};

function bounce() {
//..
}

Answer 6

Try this :

window.onload = () => {
setInterval(bounce,2000);
};

function bounce() {

// add your height, width,...

setTimeout(down,1000);
}

function down(){

document.getElementById("ball").style.bottom="0vh";
}

Answer 7

Lego in Motion
I'm sure there is a simpler way, maybe by using a canvas element, or an physics library. But how about this one?

https://code.sololearn.com/Wr2ZuYB8SoZ4/?ref=app

Or maybe a css animation?

https://code.sololearn.com/W6kQkdeoIUlx/?ref=app

I prefer the css animation because it is simpler and you have more choices on the animation timing function. It would take a lot more coding in javascript if you want a non-linear acceleration.

Answer 8

Still not working. Thanks for trying to help though!

Answer 9

Oh I guess I did something different then. Could you change it for me just for a few minutes?

Answer 10

I want the ball to bounce up and down for ever. Maybe it won't be so realistic but u can change some stuff later.

Answer 11

Nope.😕

Answer 12

AJ I want it to go back down later. Is that the problem?

Answer 13

Is it in javascript or css? DOM elements or canvas?

Answer 14

The link to the code is there. It's javascript.

Answer 15

Don't know much about java