Is there a way to change the background color of the body on click and have it applied throughout the entire site

Is there a way to change the background-color of the entire site and specific modal elements when a user switches between two radio buttons?

Here is the HTML code for the radio buttons:

  <div class="btn-group btn-group-xs" data-toggle="buttons">
    <label class="btn btn-default lightBtn">
      <input type="radio" name="options" id="light"> Light
    </label>
    <label class="btn btn-default darkBtn">
      <input type="radio" name="options" id="dark"> Dark
    </label>
  </div>

I have tried using jQuery to change the background-color based on the radio button selection, but it hasn't been successful so far.

$( function() {
   $('#lightBtn').click( function() {
     $('body').css('background', 'white' );    
   });
   $('#darkBtn').click( function() {
     $('body').css('background', 'black' );    
   });
});

Additionally, the radio button selection resets when navigating between pages. Is there a way to maintain the selected option using jQuery across pages?

javascriptjqueryhtmlcssbackground-color

Answer №1

Your HTML specifies that lightBtn and darkBtn are classes (.) of your label elements, while your jQuery is targeting elements with the IDs lightBtn and darkBtn (#).

To make them consistent, you can do the following:

$( function() {
   $('.lightBtn').click( function() {
     $('body').css('background', 'white' );    
   });
   $('.darkBtn').click( function() {
     $('body').css('background', 'black' );    
   });
});

Access the jsFiddle demo here

Alternatively, you can update your HTML labels like so:

<label id="lightBtn" class="btn btn-default">
...

<label id="darkBtn" class="btn btn-default">
...

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

if considering an integer value of 0 as equivalent to null

I am struggling with using axios to send data to an API in react. Despite the server successfully receiving the values, my code is not entering the if block as expected. Interestingly, when I make the same request from a rest client, it works perfectly. He ...

javascriptnode.jsreactjsaxios

Discovering the real-time availability of form fields can be easily accomplished by utilizing jQuery AJAX within PHP

Currently, I am in the process of creating a validation system using jQuery within PHP. I have successfully implemented username and email availability checks. However, I am facing an issue where upon submitting the form, the data is not being inserted int ...

phpjqueryajax

Repetition of UTM Parameters

I created a web page with a donation form embedded in it. Donors visiting the page come through a link that includes a source code at the end. I managed to include this source code in the URL of the embedded form using the following code: $(document).ready ...

javascriptjqueryutm-tracking

Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

In my design, I have two sets of images displayed below: https://i.sstatic.net/pQytw.jpg Both sets of images have the exact same code. The only difference between the images in the first and second set is their dimensions. I aim to make all image blocks ...

htmlcssng-bootstrap

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

javascriptnode.jsmongoose-schema

How can I display a JSON list of results in an IEnumerable type in a ViewBag using MVC?

My goal is to retrieve a list result in the type of IENumerable within the existing ViewBag that already contains a list. In the controller's action method, I am returning the list using ViewBag- [HttpGet] public ActionResult RangerCard() { var ...

c#jqueryasp.net-mvcjson

How can I define margins for a specific div in print media using CSS?

Hello everyone, I'm currently experiencing an issue with my print media CSS. On the HTML page, there are two main divs - one for the body and one for the footer. <div class="main-template-body" id="main-template-body"> //content </div> ...

htmlcssprinting

Utilizing v-model alongside various JavaScript plugins within a single select element

I've incorporated the jQuery plugins select2 and datepicker into my project, utilizing custom directives for them. Everything was functioning smoothly until I attempted to retrieve the selected value using v-model, which resulted in a failure to bind ...

javascriptvue.jsjquery-ui-datepickerjquery-select2vuejs2

What is causing my switch statement to not align with any cases?

Whenever I implement a switch statement, none of the cases seem to match the 'prefix' value. However, when I switch to using an if-else statement instead, everything functions correctly. What could be causing this discrepancy? Thanks in advance ...

javascriptregex

Converting a for loop into a fixed-size array?

I am currently developing a backbone application and have been given some sample code by the provider. The code includes a for loop that generates player names as 'player_1', 'player_2', and so on. However, I would like to manually ente ...

javascriptarraysjson

Displaying background images as list items on a web page outside of

I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...

csslist

I am looking for a way to update the path of an old image with a new one. My current method involves utilizing ajax and JavaScript to upload an image using PHP

I am trying to use AJAX and JS to upload a new image in PHP. How can I replace the old image's path with the newly uploaded image? Additionally, I want to save the new image's path to the database. Here is what I have done so far: <html> ...

phpjqueryajax

Enforcing character limits in summernote

Is there a way to set a character limit on Summernote? I've tried setting maxlength on the textarea without success. Check out the Summernote GitHub page $("#textareaid").summernote({ toolbar:[ ['style', ['style']], ...

javascriptjquerysummernote

React Issue: Footer not staying attached at the bottom of the page

I'm currently developing a website with react, but I'm struggling to keep the footer at the bottom. When there isn't enough content, the footer ends up right after the content instead of staying at the bottom. I've tried various solutio ...

htmlcssreactjsjsx

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

csswordpressinternet-explorer

Issue with JQuery Mobile: Inconsistent page navigation functionality

I am currently utilizing JQuery Mobile along with MVC4. MARKUP: <div data-role="page" data-theme="d" id="main"> <div data-role="header"> <h1>Test Page</h1> </div> <div data-role="content"> & ...

jqueryasp.net-mvcjquery-mobile

Calculate the total of all values associated with a dynamically generated key within an array of objects

I'm trying to calculate the sum of similar keys in an array of objects. Each object in the array will have some common keys, but not all arrays will share the same set of keys. I'm considering storing these keys in a separate array and then loopi ...

javascriptarraysreactjs

When using VueJs, the input value may not clear upon pressing the ESC key for the first time

When I press the ESC key, my input should clear. However, I am experiencing a bug where the input is not cleared after the first press of the ESC key; it only clears after the second press. Even though the console displays an empty value for the input aft ...

javascriptvue.jsvuejs2ref

Using Ajax post to retrieve data from multiple tables in PHP and MYSQL

I'm attempting to achieve the following: Retrieve TMSGUID from the Campuses table using the ID (primary key). Retrieve TMSGUID from the Sites table. Retrieve ID and Description from the SiteOrganisation table by using Site GUID. The PHP page is bei ...

phpjquerymysqlajaxhttp-post

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield