Colorful Background Switcher

Question

Colorful Background Switcher

I am looking to create a set of buttons representing the colors ROYGBV. I want to use JavaScript to apply a function that will change the background color when each button is clicked. The current code I have seems too lengthy. Can someone assist me with this?

function redColor(){document.body.style.backgroundColor="red";}
function orangeColor(){document.body.style.backgroundColor="orange";}
function yellowColor(){document.body.style.backgroundColor="yellow";}
function greenColor(){document.body.style.backgroundColor="limegreen";}
function blueColor(){document.body.style.backgroundColor="blue";}
function indigoColor(){document.body.style.backgroundColor="#4B0082";}
function violetColor(){document.body.style.backgroundColor="violet";}

javascript html css

Answer 1

Answer №1

To simplify the process, you can create a single function that accepts a color argument such as:

function changeBackgroundColor(color) { document.body.style.backgroundColor = color; }

This function can be used like this:

changeBackgroundColor("red");
// or
changeBackgroundColor("hsla(180, 80%, 80%, 0.8)")

If you want more flexibility, you can modify the function to also accept the element you wish to style:

function setCustomBgColor(elem, color) { elem.style.background = color; }

setCustomBgColor(document.body, "blue");

Instead of creating separate functions for each styling task, it is more efficient to have a function that can handle multiple CSS properties at once:

const applyStyles = (element, styles) => typeof styles === "object" ? Object.assign(element.style, styles) : element.style.cssText = styles;

// Example usage:

applyStyles(document.body, {
  color: "red",
  background: "blue",
  fontSize: "2rem"
});

// Or use template literals for inline styling:

applyStyles(document.querySelector("#someElement"), `
  color: red;
  background: blue;
  font-size: 2rem;
`)

Answer 2

To simplify the process, you can create a single function that accepts a color argument such as:

function changeBackgroundColor(color) { document.body.style.backgroundColor = color; }

This function can be used like this:

changeBackgroundColor("red");
// or
changeBackgroundColor("hsla(180, 80%, 80%, 0.8)")

If you want more flexibility, you can modify the function to also accept the element you wish to style:

function setCustomBgColor(elem, color) { elem.style.background = color; }

setCustomBgColor(document.body, "blue");

Instead of creating separate functions for each styling task, it is more efficient to have a function that can handle multiple CSS properties at once:

const applyStyles = (element, styles) => typeof styles === "object" ? Object.assign(element.style, styles) : element.style.cssText = styles;

// Example usage:

applyStyles(document.body, {
  color: "red",
  background: "blue",
  fontSize: "2rem"
});

// Or use template literals for inline styling:

applyStyles(document.querySelector("#someElement"), `
  color: red;
  background: blue;
  font-size: 2rem;
`)

Answer 3

Answer №2


function changeElementColor(color, selector) {
  let selectedElement = document.querySelector(selector);
  selectedElement.style.backgroundColor = color;
} 

// Example of usage in HTML:
<button onclick="changeElementColor('blue','header')">Blue</button>
<button onclick="changeElementColor('yellow','header')">Yellow</button>

Answer 4


function changeElementColor(color, selector) {
  let selectedElement = document.querySelector(selector);
  selectedElement.style.backgroundColor = color;
} 

// Example of usage in HTML:
<button onclick="changeElementColor('blue','header')">Blue</button>
<button onclick="changeElementColor('yellow','header')">Yellow</button>

Answer 5

Answer №3

Here is an innovative approach

While it may be more extensive than simply passing a color to a function, this method introduces some intriguing techniques to explore

const colors = {
  "red": "red",
  "orange": "orange",
  "yellow": "yellow",
  "limegreen": "limegreen",
  "blue": "blue",
  "hex": "#4B0082",
  "violet": "violet"
};
const colorKeys = Object.keys(colors);
const colorEntries = Object.entries(colors);

const createStyleSheet = () => {
  let head = document.querySelector('head'),
    style = document.createElement('style'),
    css = colorEntries
    .map(([name, color]) => `.${name}-bc { background-color: ${color}}`)
    .join('\n');
  css += '.colorButton { text-transform: capitalize;}'; // Uppercase first letter of button text
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css))
  head.appendChild(style);
};
window.addEventListener('DOMContentLoaded', () => {
  createStyleSheet();
  const bodyCL = document.body.classList;
  const colorDiv = document.getElementById('colorDiv');

  colorDiv.innerHTML = colorEntries
    .map(([name, color]) => `<button class="colorButton ${name}-bc" value="${name}">${color}</button>`).join('');
  colorDiv.addEventListener('click', (e) => {
    const tgt = e.target;
    if (!tgt.matches('.colorButton')) return; // not a button
    colorKeys.forEach(color => bodyCL.remove(`${color}-bc`)); // remove previous
    bodyCL.add(`${tgt.value}-bc`);
  });
})

<div id="colorDiv"></div>

Answer 6

Here is an innovative approach

While it may be more extensive than simply passing a color to a function, this method introduces some intriguing techniques to explore

const colors = {
  "red": "red",
  "orange": "orange",
  "yellow": "yellow",
  "limegreen": "limegreen",
  "blue": "blue",
  "hex": "#4B0082",
  "violet": "violet"
};
const colorKeys = Object.keys(colors);
const colorEntries = Object.entries(colors);

const createStyleSheet = () => {
  let head = document.querySelector('head'),
    style = document.createElement('style'),
    css = colorEntries
    .map(([name, color]) => `.${name}-bc { background-color: ${color}}`)
    .join('\n');
  css += '.colorButton { text-transform: capitalize;}'; // Uppercase first letter of button text
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css))
  head.appendChild(style);
};
window.addEventListener('DOMContentLoaded', () => {
  createStyleSheet();
  const bodyCL = document.body.classList;
  const colorDiv = document.getElementById('colorDiv');

  colorDiv.innerHTML = colorEntries
    .map(([name, color]) => `<button class="colorButton ${name}-bc" value="${name}">${color}</button>`).join('');
  colorDiv.addEventListener('click', (e) => {
    const tgt = e.target;
    if (!tgt.matches('.colorButton')) return; // not a button
    colorKeys.forEach(color => bodyCL.remove(`${color}-bc`)); // remove previous
    bodyCL.add(`${tgt.value}-bc`);
  });
})

<div id="colorDiv"></div>

Answer 7

Answer №4

To streamline the function, you can do the following:

function changeBackground(color){
  document.body.style.backgroundColor = color;
}

Answer 8

To streamline the function, you can do the following:

function changeBackground(color){
  document.body.style.backgroundColor = color;
}

Colorful Background Switcher

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Which is better for your website: SSG vs SSR?

What is the correct way to transfer session variables to an email?

Unable to detect HTML special characters in the text

Struggling with displaying MySQL data in JSON format using Highcharts

The method of iterating over a string in key-value pairs

If there is no data defined, then it is necessary for at least one attribute to be present in the

Sending an Array from JavaScript to Asp.net Core

Responsive Design and Advertising with CSS Media Queries

JavaScript's failure to properly handle UTF-8 encoding

Unable to Click on Selenium Element

Obtaining a response in string format using the $.ajax function

Is there a way to automatically generate additional text fields based on the user's input?

Tips for retrieving data from a JSON array

Validate the date selected in a dropdown menu using JavaScript

Resolved: Angular JS resolves circular dependencies

Use Google script to input drop down options directly into a Google spreadsheet

Unable to append Jquery attribute to a div component

Tips on saving checklist values as an array within an object using AngularJS

What is the best way to replicate a div's background color using an image within the body element?

I am looking to integrate a predefined equation using JavaScript