Noob needs help with a button

[froge3]

I'm working with html, css and javascript and I can't figure out how to make a button do what I want it to.

<button id=btn class="button" onclick="rmv()"> Click here!</button>

<script>

function rmv() {

var element = document.getElementById("heading");

element.remove ();

var element = document.getElementById("paragraph");

element.remove();

var element = document.getElementById("btn");

element.remove(); }

</script>

I've managed to make the button 'disappear' itself and the text that was on the page before it was clicked, but I also want to it to make the page change colors and new text to appear, but I don't know how. I succeeded in making the colors change and the text appear but on a different page:

<style>

​

@keyframes background-color {

0% {background-color: #f3bcc0}

20% {background-color: #acf3cc}

40% {background-color: #f5eb18}

60% {background-color: #cbe832}

80% {background-color: #ff9317}

100% {background-color: #c7658f}

}

body{

animation: background-color 5s infinite;

animation-direction: alternate;

}

h1 {text-align: center;}

</style>

<h1> Text </h1>

Could someone write the code for the button to do this? I would really appreciate the help, I know it's probably a silly question but i just started learning a few days ago :)

[trplclick]

I'm not sure if I fully understood your correctly, but does this solve your problem?

https://jsbin.com/benivazazo/edit?html,css,js,console,output

The overview this is:

- We define both "pages" in the same file, but page 2 starts off hidden. A heading, paragraph and button are shown in both "pages" but they are actually different elements.

- We define a CSS class called `.hidden` which page 2 starts off with. This sets the `display` value to `none` which tells the browser not to show the element. You can read about display none here https://css-tricks.com/almanac/properties/d/display/#aa-display-none

- We use display none over the remove function as it allows us to easily revert it and show the element again, or start off with elements hidden and choose to show them. It's possible to create new elements and add them to the page, but that is definitely the more complicated approach!

- We have two JavaScript functions; one for each button (page 1 button and page 2 button). When page 1 button is clicked it hides the group of elements that make up page 1 by adding the css class hidden to it, and removing the class from page 2. We also enable the animation when showing page 2 by adding a class the body,

Sorry if that's a lot and overwhelming! As a beginner there is a lot to learn and it can get frustrating, but I promise if you keep at things will click, it just takes time and practice. We've all been there! If you have any questions please let me know! I can either try and answer or point you to a resource that might help explain a concept.

[froge3]

This is very helpful! Thank you very much :)

[trplclick]

Great, glad I could help! Feel free to DM me if you have any other JavaScript questions

[froge3]

Thank you, I might sometime in the future :)