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>

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why do HTML elements in an email have strange prefixes added to their IDs?

Currently, I am working on setting up automated tests for my service that automatically sends email reports. The objective is to verify the accuracy of data in the emails. To accomplish this, I have started assigning unique IDs to different HTML elements ...

Tips for including multiple directives in a component

Apologies in advance for my lack of clarity in expressing this question, which is why I am seeking assistance rather than finding the solution on my own. My query pertains to loading a component within another one and specifying it in the directive. Below ...

The code within the then() promise resolver function will always execute, regardless of whether the promise succeeds or

After clicking a button, I trigger a vuex action which returns an axios promise from the store. In my component, I only want to reset form fields when the action is successful. However, currently the form fields are always reset, even if the promise fails. ...

How can I incorporate calc() with fit-content or a similar function?

Is there a way to set the height of a div to "fit-content minus 15px" without using JavaScript? I attempted to use calc(), but it did not yield the desired result. My objective is to dynamically adjust the height of an element containing multiple p tags, ...

The checkbox appears to have selected values, yet the selected options are not visibly displayed

UPDATE I have been utilizing this specific file in order to dynamically generate a list of tags using the code provided below. import React from "react"; class TagElement extends React.Component{ updateCheck(e){ var v = (e.target. ...

Conceal a particular row in SharePoint by utilizing JavaScript with jQuery

I'm facing an issue with SharePoint 2010 where the _cts folder is visible in all document libraries. Despite my efforts to research and find a solution, I have been unsuccessful so far. For now, my workaround is to hide the entire row. Here's a ...

Can an Angular application be developed without the use of the app-root tag in the index.html file?

I'm a newcomer to Angular and I'm trying to wrap my head around how it functions. For example, if I have a component named "login", how can I make Angular render it directly? When I try to replace the app-root tag with app-login in index.html, n ...

Reset checkboxes in Material UI data grid

Currently, I am immersed in a React Js project that involves various tabs, each containing a unique data grid table with rows featuring checkboxes. Issue: Whenever I select a row from Table 1 and navigate to Tab 2 before returning to Tab 1, the checkboxes ...

Facing issues with the forEach method in ReactJs when attempting to access data from an array

Struggling with a ReactJS issue, I've come across a problem with the HomePage Component where the forEach method isn't working as expected. I'm attempting to retrieve data from a defined array. Take a look at the code snippet below: import R ...

How can I modify this code to be more responsive using float or relative positioning without introducing any errors?

I'm currently struggling to create a responsive web page that adjusts to any screen size automatically. Here is the code I have so far, including both HTML and CSS. What changes can I make to ensure the elements are properly placed regardless of the s ...

Determine the success of an SQL query in Node.js

I've created a basic API using nodejs to connect my Flutter app with a SQL Server database, but I have a question. How can I verify if the query was successful in order to return different results? I'm attempting an update after a successful in ...

Stop Bootstrap IE menu from closing when scrollbar is clicked

When using IE, the dropdown menu closes when clicking on the scrollbar. However, it functions properly when scrolling with the mouse wheel. To see the issue in action and potentially offer a solution, you can visit this Codeply link: I'm seeking sug ...

Unblocking the context menu: How entering JS directly into the address bar compares to using a bookmark

Exploring the concept of blocking the context menu using JavaScript. Here's how you can block such a menu: document.addEventListener('contextmenu', event => event.preventDefault()); I recently came across an article that mentioned this ...

Strange behavior detected in TypeScript generic function when using a class as the generic parameter

class Class { } const f0 = <T extends typeof Class> (c:T): T => { return c } const call0 = f0 (Class) //ok const f1 = <T extends typeof Class> (c:T): T => { const a = new c() return a //TS2322: Type 'Class' is not assigna ...

What is the best way to extract a single image from JSON data using AngularJS?

Using ng-repeat in HTML, how can I display only a single image instead of all images? <img class="size" ng-src="{{image.image}}" /> In CSS, I aim to define the size of the image. .size { margin-left:0.3em; width:11em; height:11em; border:0.4em sol ...

Can Node.js Utilize AJAX, and if So, How?

Coming from a background in browser-based JavaScript, I am looking to dive into learning about node.js. From my current understanding, node.js utilizes the V8 engine as its foundation and offers server-side JavaScript capabilities along with pre-installed ...

How to Query MongoDB and reference an object's properties

I'm trying to execute a script on my MongoDB that will set teacher_ids[] = [document.owner_id]. The field owner_id already exists in all the objects in the collection. Here is my current attempt: db.getCollection('readings').update({ $where ...

transferring the parsed JSON document to the recipient, however, it does not adhere to

After calling the API and parsing the JSON data, I now aim to present this parsed JSON in tabular form on the receiving page. Currently, it is being displayed as plain text. The API URL used for testing purposes has been sourced from WIKI to safeguard act ...

Experiencing problems with the Datepicker and cloning functionality in JQuery?

This is the section of code responsible for cloning in JavaScript. $(document).on("click", ".add_income", function () { $('.incomes:last').clone(true).insertAfter('.incomes:last'); $(".incomes:last").find(".income_date_containe ...

The radio input is not being properly checked using ng-checked in Angular

The ng-checked attribute is causing issues in the application, specifically with radio buttons. It seems to be working fine for checkboxes but not for radio buttons. <input type="radio" class="radio" name="job_class_radio" ng-checked="key===jobClassDat ...