How Do I Make A Button Change Everything About A Page?

Code Help HTML/CSS/JS
1

Does anyone know how to make a button change all the style? I want a button that will change the background color, the button color, the h1 header, etc. Anyone have a code for that?

would really appreciate it :slight_smile:

2

use document.GetElementById("ID").style.backgroundColor = "red";

3

The link above has all the info you need for changing elements styling using JS.

4

Hi, @elnolfi!

This should be pretty easy to implement.

First, create a button.
<button>Click me!</button>

Second, create a function per change you want, or add multiple changes in a single function, this will be what @KillerCl0wn suggested.

If you want to change elements by tag name, do the following. If you would rather change by ID, not simply change .getElementsByTagName() to .getElementById()


function changeBGColor() {
    document.getElementsByTagName("body").style.backgroundColor = "color";
    // Selects all elements with "body" tag and changes the background to said color
}

Keep changing elements and/or adding new functions to your liking, use the guide @KillerCl0wn suggested for some more implementation methods.

Finally, add onclick to your button. Set it to the name of your function.
<button onclick="changeBGColor()">Click me!</button>

1 Like
5

can’t you just do this for tags

document.body.style.background = "";
6 
<html>
  <head>...</head>
  <body>
    <h1 id="myHeader">Some header text</h1>
    <!-- The button that changes everything -->
    <button id="myButton" onclick="myFunction()">Click me!</button>
    <script>
      function myFunction() {
        const button = document.getElementById("myButton"); // The button element
        const header = document.getElementById("myHeader"); // The header
        
        header.innerText = "Changed text"; // Change the text in the header
        document.body.style.backgroundColor = "red"; // Change the background to red
        button.style.backgroundColor = "blue"; // Change the button color to blue
      }
    </script>
  </body>
</html>
2 Likes
7

Yes, but I believe that would only work for the body. OP did say he wanted to change h1 and some other tags.

8

Yah I use theDocument.getElementById(""); a ton for https://yachtzee.killercl0wn.repl.co

1 Like
9

Yes, I would recommend using .getElementById() compared to .getElementsByTagName(), and assigning elements a tag per element you want to change.

2 Likes
10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.