How can i change the background colour of a webpage based on options given to the user from a select menu?

Question

I want a drop down menu which allows a user to set the background colour of the webpage im making, ive searched online and only seem to find how to change the background of the actual list itself, whereas i want it to change the colour of the entire form.

You can set the color of the list? Just do that same thing to whatever other element you want. `document.body.style.background = '#000';` — Mike Cluck, Mar 29 '16 at 17:41
that will give it a set background colour no? i need for it to dynamically change based on the colour selected from a drop down list the user picks, thanks — Abdellah Jbari, Mar 29 '16 at 17:45
Right. So take the value from the selected item in the dropdown list and use that value. [Here's how to get the selected value](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript). Now you've got all of the pieces you need. — Mike Cluck, Mar 29 '16 at 17:47

smaili · Answer 1 · 2016-03-29T18:23:45.940

2

Here is a simple example:

The HTML:

<body>
    <select id="color" name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</body>

The Javascript:

// grab the body and select
var body = document.body;
var select = document.getElementById( 'color' );

// listen for the select's change event
select.onchange = function() {
    var color = select.options[select.selectedIndex].value; // get the selected color
    body.style.background = color; // apply the selected color to the body
};

edited Mar 29 '16 at 18:23

answered Mar 29 '16 at 17:51

smaili

1,245
9
18

I think you [need to change how you're getting the value.](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – Mike Cluck Mar 29 '16 at 17:53
Giving this a vote even though OP is asking for changing background of page, and he explains that he already knows how to do it on the form... Consider updating your answer to work with the OP's question! – chrisv Mar 29 '16 at 18:06
@chrisv he does say `i want it to change the colour of the entire form` so I interpreted that to be the `select`'s form :) – smaili Mar 29 '16 at 18:12
@smaili stupid me... I got confused of this part: "allows a user to set the background colour of the webpage im making" :P – chrisv Mar 29 '16 at 18:14
yeah sorry, i meant i needed the entire page to change colour, thanks – Abdellah Jbari Mar 29 '16 at 18:21
1

@AbdellahJbari I updated it to use the `body` instead of a `form`. If this answers your question, please remember to mark it as answered. – smaili Mar 29 '16 at 18:24

score 0 · Accepted Answer · answered Mar 29 '16 at 18:00

0

User below select and add options as per you requirement.

<select id="color-select">
<option value="red">Red</option>
<option value="green">Green</option>
</select>

Below script is used to change background color of the webpage, you can change to a specific DOM element.

document.getElementById('color-select').onchange = function () {
 document.body.style.backgroundColor = document.getElementById('color-select').value;
    };

answered Mar 29 '16 at 18:00

D Mishra

1,518
1
13
17

thanks a million, by any chance do you know what i'd need to change to make it change the text colour of all text on the page? – Abdellah Jbari Mar 29 '16 at 18:48
Replace backgroundcolor with color – D Mishra Mar 30 '16 at 01:43
hmm doesn't seem to work, is there anything i might need to add? thanks – Abdellah Jbari Mar 30 '16 at 08:28
Add this `document.body.style.color = "#00F";` in the same go as you change the background color. Working example: https://jsfiddle.net/ppuoxdtm/ Notice I based my example on @smaili 's answer – chrisv Mar 30 '16 at 21:10

score -1 · Answer 3 · answered Mar 29 '16 at 17:46

-1

Well first you would probably want to add an id to the body tag, for easy reference from javascript. You would then attach an event handler to the onChange event of the dropdown (select) input, using a color name as the value, and pass that to the event handler. In the event handler you will then change the color of the background (grabbing it by its ID, using either jQuery or vanilla js) to whatever string color value was passed.

answered Mar 29 '16 at 17:46

chrisciampoli

23
6

No need to add an ID to the body. You can access it using `document.body`. – Mike Cluck Mar 29 '16 at 17:47
Sure you could, but if using bootstrap or something similar you could always content it. Here is a jsfiddle using jQuery. https://jsfiddle.net/qyujfs65/ – chrisciampoli Mar 29 '16 at 17:54
What? You mean you could add an ID of "content" to something (which does not require Bootstrap, by the way) then style that? Sure, but that doesn't change the fact that you can reference the body with `document.body`. – Mike Cluck Mar 29 '16 at 17:55
What I mean is that most times in modern sites USING bootstrap, an id of content is used on the overall containing body (be that a div, a section, or the body itself). So having an id of content on the body tag is perfectly acceptable. While you MAY NOT choose to use it as such, its not bad practice. I don't believe I ever said adding an id of content to anything NEEDED bootstrap either. Check my answer before you start throwing around assumptions. Thanks. – chrisciampoli Mar 29 '16 at 20:17

How can i change the background colour of a webpage based on options given to the user from a select menu?

3 Answers3