What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using:

$(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;");

When I execute this:

alert( localStorage.getItem('bgColorr') + " !important;");

I receive the correct alert which is rgb(243,102,42) !important; ....

This issue is really bothering me.. thank you for your help!

Edit:

The surrounding code snippet is as follows:

$(function() {
    $(this).css('background-color', localStorage.getItem('bgColorr'));
});

var colorOptions = '#000, #fff, #abf7ae, #f6cbe9, #53c68f, #53c1c6, #538dc6, #c6536b'.split(', '),
    colorDivs = [],
    colorsContainer = $('#colorsContainer');

for ( var i = 0, len = colorOptions.length; i < len; i++ ) {
    var div = $('<div />').css('background', colorOptions[i])[0];
    colorDivs.push(div);
}

colorsContainer.append(colorDivs);

$('#header').hover(function() {
    colorsContainer
    .fadeIn(200)
    .children('div')
        .click(function() {
            $('body').css('background', $(this).css('backgroundColor'));
            localStorage.setItem('bgColorr', $(this).css('backgroundColor'));
        });
}, function() {
    colorsContainer.fadeOut(200);
});

That should do it, thanks everyone!

Answer №1

  • Instead of using 'backgroundcolor', try using 'background-color'.
  • Avoid using !important, as it cannot be set via JavaScript.
  • Do not include a semicolon at the end of the property value.

Update:

Furthermore, it appears that this is not an HTML element. Make sure to use a proper selector such as $('#someid') for selecting elements with specific IDs. If you wish to change the body background, use $('body').

To sum up, your final code should look like this:

$('body').css('background-color', localStorage.getItem('bgColorr'));

Answer №2

The issue lies not in the getItem function or any other part of your code, but rather in the capitalization of the CSS property name. The correct spelling is backgroundColor, not backgroundcolor.

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

Stop the webpage from scrolling when clicking on a ui-grid field

Is there a way to prevent page scrolling when clicking on a row field in ui-grid? I'm working with a page that has ui-grid, and each row includes an anchor tag with a URL value linked and target="_blank" to open in a new tab like the example below: ...

When the browser window is minimized, the top section of the website becomes concealed

For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered. When viewing my website in a browser window smaller than the actual webpage size, the top menubar ...

Check if the number field in the If statement is empty or contains an excessive number of decimal places, while excluding cases where only zeroes are present in the decimal places

I am currently working with the following line of code: if ($val === "" || ($val.split(".")[1] || "").length > 2) With some assistance from the helpful individuals here, I have managed to implement this code successfully. ...

Remove the $(window).resize event handler

Setting up a listener for the browser window, I use this line of code: $(window).resize(resizeObjects); However, during certain points in the web application cycle, I need to remove this event from window.resize. Can anyone provide guidance on how to det ...

Trigger the opening of a bootstrap modal from an external source on the current page

One common question is how to load a modal from another page onto the current page, or how to open a modal on the current page when it loads. My idea is a little different: I want to click on an image hotspot (like a person in a team photo) on the /home p ...

Creating dynamic scroll animations for sidebar navigation in a single-page website with anchor links

I need help creating a seamless transition between anchor points on a single page, while keeping a fixed navigation menu that highlights the active section. As a novice, I am unsure how to incorporate "( document.body ).animate" or any other necessary code ...

Disabling Navigation with Arrow Keys in Prettyphoto

Is there a way to prevent arrow keys from functioning in PrettyPhoto for a specific instance? I have tried using keyboard_shortcuts:false, but it still reloads the frame if left or right arrow keys are pressed, causing the form inside to reset. However, co ...

Validation needed for data list option

Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...

What is the most efficient way to use jQuery to retrieve the count of tags associated with a variable

I am trying to filter my data retrieved from ajax using a function. Here is the initial code: var csvf = data.filter(function (el) { return ['TRUCK_CPX'].indexOf(el.TAG) >= 0 && ['CA5533'].indexOf(el.Chave) >= 0 }); Now ...

"An interactive webpage utilizing HTML5 that transmits sensor information from an iPhone to a server

Recently, I have been immersed in a project that involves utilizing the gyroscope of an iPhone to manipulate items on a computer screen. To achieve this, I have been using an application called "Sensorlogger" which allows me to stream sensor data to the co ...

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

Utilize jQuery ajax to pull in data from an external website

I've been doing some research on using jQuery ajax to extract links from an external website, but I'm a bit lost on where to begin. I'm taking on this challenge just to push my skills and see what I can accomplish. While reading about the S ...

Steps for importing JQuery into a custom DNN module

I have developed a custom DNN module that requires the use of certain JQuery plugins. I successfully loaded the plugins, but encountered the following error: Uncaught TypeError: undefined is not a function imagesloaded.js?cdv=18:93 Uncaught TypeError: ...

Utilizing visual elements to change the options of a dropdown menu

I am currently working on creating a form for a client who has requested a map of the city to allow visitors to visually select their location. They want this feature to link to the City Dropdown/Select area of the form. Here is a link to the client' ...

The session name has not been properly defined

Sorry for any errors in translation. I'm facing an issue where the session name I insert is coming up as undefined. However, when I manually enter the username, everything works fine. View Image <? php session_start (); echo var_dump ($ _SESSION ...

HTMLMediaElement does not have the setSinkId method

I am currently in the process of developing a WebRTC application using Angular, with the goal of managing audio output through the setSinkId() method within HTMLMediaElement. However, when attempting to use this method, I am encountering an error message s ...

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, ...

Several radio buttons and their corresponding labels are shown on a single line inside a nested div container

Upon stumbling across this post, I realized it perfectly aligns with my current goal: Radio Button and Label to display in same line. However, the challenge persists... The layout I currently have (first 3 columns) differs from what I aspire to achieve (l ...

Is there a way to configure this code to automatically start upon page refresh?

Recently, I had someone help with this code but now they are nowhere to be found to complete it. Despite my efforts to search online and ask around, I am unable to determine how to make this code automatically start after refreshing the page. It's im ...

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...