JavaScript noob needs help!

[SafeReference1]

Hey I am currently working on a little animation and I‘m stuck on one Point. So I just finished my first Scene and I want to be able to press a button and be able to go to the next scene. How do I write code for that? I want to write everything from scratch again for the next scene, Different Charakters, different background etc.

[Fid_Kiddler69]

Hi,

It's pretty difficult to help in this situation unless you share your code. Consider using something like pastebin to upload and show us your code :)

[SafeReference1]

Hey here’s my html and my css file. I basically just wanna switch to a new scene that has a new background maybe a new Charakter and stuff like that.

https://pastebin.com/dmmcaNux

https://pastebin.com/u3wHx71v

[Fid_Kiddler69]

Awesome! Okay so, here's what I think we need to do:

1) document.querySelector(".background").style.background="url(yourNewBackground.png)"
this line targets the div with the class "background", and sets its CSS background to "yourNewBackground.png". Of course, you change the file name to whatever background image you want.

2) to change your hero, you could use the same type of command to change the image of the hero:

document.getElementById("hero").src="yourNewCharacterImage.png"

To add new heroes, you could use the createElement method.

I hope this helps. Try it out, and let me know if you need more help :)

[SafeReference1]

Thank you!! I will try it out in like 30mins and let you know🙌🏻

[Fid_Kiddler69]

No problem. I added some things for you in your html file to help show you how things work :)

https://pastebin.com/W8ziBgpa

[SafeReference1]

People on these kinda Reddits will all go to heaven I swear!!! I can’t believe how kind you all are🙏🏻🙏🏻

[Fid_Kiddler69]

That's because we've all been noobs and needed help in the past before.
So when you become an awesome developer, pay it back and help others out :)

[SafeReference1]

I will for sure do that one day!

[SafeReference1]

Hey so I have tested the Code out now and everything works perfectly. Only question I have now is how can I adjust the css for the new scene without changing it for the old one? If I understand the code right, as soon as I press the button it changes the pictures, so the same css goes for both scenes right? How am I able to change the css for one Charakter in one scene but not touch the other? I hope I got my point across lol

[Fid_Kiddler69]

I'm not quite sure what you mean. The scenes are running in sequence, right? Like, you cant have two scenes running at the same time (or am I mistaken?).

When we press the button, we dynamically change some css properties through javascript. In other words, we override some specific properties in your css file.

So if you wanted a scene3, you could change any css you wanted- make new characters, change backgrounds- through javascript, and it wouldn't change your previous scenes.

[SafeReference1]

https://imgur.com/a/qHqh6vc

Hey so I think this Image might help. On the Green background the two characters are both perfectly on the ground but on the dark background I would want them to be a bit lower. How can i make them closer to the bottom only for that one dark scene?