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

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:

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

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

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

can’t you just do this for tags = "";
    <h1 id="myHeader">Some header text</h1>
    <!-- The button that changes everything -->
    <button id="myButton" onclick="myFunction()">Click me!</button>
      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 = "red"; // Change the background to red = "blue"; // Change the button color to blue

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

Yah I use theDocument.getElementById(""); a ton for

1 Like

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


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