What is the best way to implement JavaScript code that can modify the layout of a website across all its pages?

Question

What is the best way to implement JavaScript code that can modify the layout of a website across all its pages?

I am facing an issue on my website where, on the index page, clicking a button changes the background color to black. However, this change is not reflected on other pages even though I have linked the JavaScript file to all HTML documents. How can I make it so that the background turns black on all pages when the button is clicked?

Here is what I've tried so far:

function updateBackgroundColor() {
  document.getElementsByTagName("body")[0].style.cssText = "background: black;";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
      body {
        background: white;
       }
      </style>
</head>
<body>
    <button id="button" onclick="updateBackgroundColor()">Change to black</button>
    
    
</body>
</html>

javascript html css

Answer 1

Answer №1

To personalize your webpage background color, you can store the chosen color in localStorage and retrieve it when the page loads. As users browse through different sections of your site, the script will automatically adjust the background color based on their preference.

Below is the code snippet for a script named customize.js:

function setBGColor() {
  var bgColor = localStorage.getItem("bgColor");
  document.body.style.backgroundColor = bgColor;
}

function changeBGColor(newColor) {
  localStorage.setItem("bgColor", newColor);
  setBGColor();
}

setBGColor();

Here is how you can integrate this functionality into your HTML:

...
<body>
    <button id="button" onclick="changeBGColor('black')">Change to black</button>
</body>

Answer 2

To personalize your webpage background color, you can store the chosen color in localStorage and retrieve it when the page loads. As users browse through different sections of your site, the script will automatically adjust the background color based on their preference.

Below is the code snippet for a script named customize.js:

function setBGColor() {
  var bgColor = localStorage.getItem("bgColor");
  document.body.style.backgroundColor = bgColor;
}

function changeBGColor(newColor) {
  localStorage.setItem("bgColor", newColor);
  setBGColor();
}

setBGColor();

Here is how you can integrate this functionality into your HTML:

...
<body>
    <button id="button" onclick="changeBGColor('black')">Change to black</button>
</body>

What is the best way to implement JavaScript code that can modify the layout of a website across all its pages?

Answer №1

Similar questions

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

What is the reason for React.Component being implemented as a function rather than an ES6 class?

Regular pattern with Kubernetes cluster endpoint utilizing either IP address or fully qualified domain name

Sliding Dropdown Menu with Dynamic Title Change Upon Selection

Maintaining a security token across multiple requests

Using jQuery to swap an image with a div element and then using the image as the

Is there a way to input data into an AngularJS modal?

React Component is not functioning with the timer running

The text and buttons exceed the size limits of the popup box

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

When switching windows or tabs, the user interface of the browser extension vanishes

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

Change the element's color to match the default anchor link

The connection between an HTML form and PHP is not being established

Vertical text area expansion functioning in Chrome, but not in Firefox

Optimal method for linking jQuery ajax requests to transfer data

Identify user input with Python Selenium for keyboard and mouse interactions

Having trouble interacting with an xpath-selected element in Selenium using Python?

What could be the reason for the styled-jsx not applying the keyframe animation?