I'm trying to create a webpage where there are three working buttons that are labelled "Red", "Green", and "Blue". When the user clicks on one of the buttons, the entire webpage should change to the color of the specific button that was clicked.

This is what I have so far, but I'm pretty sure I'm doing something wrong:

function myFunction() {
  document.getElementById("H1").style.color = "#ff0000";
}

<h1 id="H1">H1</h1>
<button type="button" onclick="myFunction()">Set H1 to Red</button>

CodePudding user response：

We begin with creating three radio buttons named red, green, blue inside the form tag and use attribute named on Click and assign value document. bgcolor=color name to it.

CodePudding user response：

I mean this solve your problem:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: white;
}
</style>
</head>
<body>

<button onclick="myFunction(this)" >Red</button>
<button onclick="myFunction(this)" >Green</button>
<button onclick="myFunction(this)" >Blue</button>

<script>
function myFunction(element) {
  document.body.style.backgroundColor = element.innerHTML;
}
</script>

</body>
</html>

Hope this help!

CodePudding user response：

There is only one problem here that you changed color but you want to change background color.
Hope this will help you.

function myFunction() {
  document.body.style.backgroundColor = "#ff0000";
}

CodePudding user response：

onClick the button will invoke the changeColor function which will take the innerText

of the button as style value and set it as background color of the body.

function changeColor (element){
document.body.style.backgroundColor = element.innerText
}
console.log(document.body.style.backgroundColor)

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<button onclick="changeColor(this)" >Red</button>
<button onclick="changeColor(this)" >Green</button>
<button onclick="changeColor(this)" >Blue</button>
</body>
</html>

You can also use class or id selector to select the element instead of using tag name.

const element = document.getElementsByClassName(".class")

In this case the element will be an array of nodes that have the same class. You can use forEach loop to trigger color change on all of them.

or use an Id if the target is a single element.

const element = document.getElementById("id")

You can also use onclick event listener to change the color.

CodePudding user response：

First the "problems," which I'm not convinced are problems since clicking the <button> does exactly what the <button> says – in its text – that it will do. However:

function myFunction() {
  // as the button-text implies this JavaScript retrieves
  // the element with the id of 'H1', and updates its
  // CSS - via the inline style element - to the colour
  // of '#ff0000' (or '#f00'), which is red.
  document.getElementById("H1").style.color = "#ff0000";
}

<h1 id="H1">H1</h1>
<!-- Obviously you know that this element is intended to set
     the colour of the <h1> element, given the text of the
     <button>; also you're using an inline event-handler
     (the 'onclick' attribute) to bind a function to an event,
     which is considered bad practice due to the obtrusive
     nature of the event-binding, and difficulty of updating
     function calls: -->
<button type="button" onclick="myFunction()">Set H1 to Red</button>

To do as you ask, and instead set the background-color of a given element, we must:

retrieve that element in the JavaScript,
update the correct – background-color – property,
find a means by which the <button> can "communicate" the correct value to which that property must be set, and ideally
use unobtrusive JavaScript to bind the function to the 'click' event.

To do that:

// assigning a meaningful name to the function
// in order to make future maintenance easier:
function setBackgroundColor(evt) {
  // retrieving the element we wish to style:
  const body = document.querySelector('body')
    // accessing the style interface, and
    // updating the background-color, via the
    // JavaScript camelCased property-name:
    body.style.backgroundColor = evt.currentTarget.value;
}

// retrieving the <button> elements:
const buttons = document.querySelectorAll('button');

// iterating over that NodeList of <button>
// elements, using NodeList.prototype.forEach():
buttons.forEach(
  // using an Arrow function, passing in a reference
  // to the current Node of the NodeList over which
  // we're iterating. Here we use the
  // EventTarget.addEventListener() method to bind the
  // setBackgroundColor() functiona as the 'click'
  // event-handler when the node is clicked (also fired
  // on keyboard navigation if the user hits spacebar
  // or enter):
  (node) => node.addEventListener('click', setBackgroundColor)
)

<h1 id="H1">H1</h1>
<!-- here we're adding a "value" attribute to hold
     the colour to set; we're using a colour-name
     ('red'), a hexadecimal ('#87cefa'), and
     a hsl() ('120deg 93% 80%') value as the colour: -->
<button type="button" value="red">Red</button>
<button type="button" value="#87cefa">Blue</button>
<button type="button" value="hsl(120deg 93% 80%)">Red</button>

There is, of course, an alternative and that's to use a colour-picker <input>, which allows the user to pick any colour of their choice and simply pass the chosen value to the function:

// assigning a meaningful name to the function
// in order to make future maintenance easier:
function setBackgroundColor(chosenColor) {
  // caching the <body> element:
  const body = document.querySelector('body');
  
  // updating the background-color via the
  // 'style' interface:
  body.style.backgroundColor = chosenColor;
}

// retrieving the <input> element with a type-attribute
// equal to "color":
const input = document.querySelector('input[type=color]');

// using EventTarget.addEventListener() to use the anonymous
// function to call the setBackgroundColor() function, passing
// the value of the evt.currentTarget node (the color <input>)
// as the argument:
input.addEventListener('change', (evt)=> setBackgroundColor(evt.currentTarget.value));

<h1 id="H1">H1</h1>
<input type="color">

References: