How do I change the background colour of a page in HTML?

Question

I am quite new to HTML/CSS/JavaScript and I was wondering how I could change the background colour, with a combination of JavaScript? I have 3 buttons (red, green and blue), and whenever the user presses on one of the three buttons, the background should change accordingly.

Currently, only the 'red' button works. The background doesn't change for the blue and green buttons.

Thanks in advance!

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <button id = "red" value = "red">R</button>
        <button id = "green" value = "green">G</button>
        <button id = "blue" value = "blue">B</button>
        <script>
            document.querySelector('button').onclick = function() {
                document.querySelector('body').style.backgroundColor = this.value;
            }
        </script>
    </body>
</html>

@marzelin is forEach part of the return value for querySelectorAll? — B''H Bi'ezras -- Boruch Hashem, Aug 21 '20 at 11:24
``forEach`` is a method that applies to list/array to iterate through each item in the list/array. — OMi Shah, Aug 21 '20 at 11:25
Thanks for your answer. Where should I write '.onclick' if I put forEach() instead? — user13717018, Aug 23 '20 at 08:17

0stone0 · Answer 1 · 2020-08-21T11:50:32.403

1

Use: document.querySelectorAll, then loop through selected elements with document.queryselectorall

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <button id = "red" value = "red">R</button>
        <button id = "green" value = "green">G</button>
        <button id = "blue" value = "blue">B</button>
        <script>
            document.querySelectorAll('button').forEach(function(element) {
                element.onclick = function() {
                    document.body.style.backgroundColor = this.value;
                }
            })
        </script>
    </body>
</html>

Small note: Use document.body (docs) instead of document.querySelector('body') to speed things up ;)

edited Aug 21 '20 at 11:50

answered Aug 21 '20 at 11:27

0stone0

34,288
4
39
64

1

`document.querySelector('body')` should be stored outside of the listener for better performance. – marzelin Aug 21 '20 at 11:28
1

btw, you don't have query for `body`, use `document.body`. – marzelin Aug 21 '20 at 11:38
I've used `document.querySelctor` because OP was using it, shameful copy paste ;) – 0stone0 Aug 21 '20 at 11:49
Could the silent down-voter please clarify how I should improve my answer? – 0stone0 Aug 21 '20 at 13:16
Thanks for you answer. What exactly does 'function(element) do? Does that refer to one line, e.g. ? – user13717018 Aug 23 '20 at 08:15
Your welcome! Please [accept/upvote](https://stackoverflow.com/help/someone-answers#:~:text=To%20accept%20an%20answer%3A,the%20answer%2C%20at%20any%20time.) the answer if it helped you. The `function(element)` is described here: [`forEach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), it's each element thats in the array. – 0stone0 Aug 23 '20 at 15:09

score 0 · Answer 2 · answered Aug 21 '20 at 11:22

0

That's because

document.querySelector('button').onclick

Only adds the event to the first button, in this case red

The are a few ways to do it for all of them, one way is

Array.from(document.querySelectorAll('button')).forEach(x=> x .onclick = function() {
                document.querySelector('body').style.backgroundColor = this.value;
            })

answered Aug 21 '20 at 11:22

B''H Bi'ezras -- Boruch Hashem

3,665
3
33
83

You don't need `Array.from` to use `forEach`. Node list has this method. – marzelin Aug 21 '20 at 11:24
Any advantage to convert node list to array? I only see disadvantage because of creating a shallow copy. – Ashish Yadav Aug 21 '20 at 11:25
@ashilsh on my sightly older browser nodelist didn't have forEach – B''H Bi'ezras -- Boruch Hashem Aug 21 '20 at 11:27
I think Array.form was added later and doesn't supports the old browser. – Ashish Yadav Aug 21 '20 at 11:31
fortunately for you, it has `Array.from`. Let's go all the way down to IE8 and use `for` loop :) – marzelin Aug 21 '20 at 11:32
@ashiish but was it added before nodelist forEach? – B''H Bi'ezras -- Boruch Hashem Aug 21 '20 at 11:32
No worries :D :D – Ashish Yadav Aug 21 '20 at 11:33
For support old browser better use [polyfill forEach](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill) same for [Array.form](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill) _Array.from() was added to the ECMA-262 standard in the 6th Edition (ES2015)._ – Greg-- Aug 21 '20 at 11:33
@greg array.from was added much before nodelist forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach – B''H Bi'ezras -- Boruch Hashem Aug 21 '20 at 11:37
@ashiish array.from was added much before nodelist forEach developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach – B''H Bi'ezras -- Boruch Hashem Aug 21 '20 at 11:38
1

Both are not supported in IE & the good news is IE will no longer be backed my Microsoft so no worries with any method. :) – Ashish Yadav Aug 21 '20 at 11:40
@ashiish I don't care for IE answer is mainly for other browsers – B''H Bi'ezras -- Boruch Hashem Aug 21 '20 at 11:41

gpl · Answer 3 · 2020-08-21T12:49:05.347

Your code not working because querySelector() method returns only the first element that matches. For further details, check here: w3schools.com

Check out this snippet:

<!DOCTYPE html>

<html lang="en">
<head>
    <title>My Webpage</title>
    <script type="text/javascript">
        function changeBackground(button){
            document.body.style.backgroundColor = button.value;
        }
    </script>
</head>
<body>
    <button id = "red" value = "red" onclick="changeBackground(this);">R</button>
    <button id = "green" value = "green"onclick="changeBackground(this);">G</button>
    <button id = "blue" value = "blue"onclick="changeBackground(this);">B</button>

</body>
</html>

Here we are calling changeBackground() method with current button as parameter on button click. In the method, value of clicked button is used to set style of document's body.

mixing javascript with html in `onclick` attribute is not ideal. — marzelin, Aug 21 '20 at 11:45

How do I change the background colour of a page in HTML?

3 Answers3