How to change and save color of body using dropdown menu

user_5679171 0
Viewed 328

I'm attempting to change the body color using the options provided in a dropdown menu and saving those changes so when the user refreshes the page, the background color will be equal to what they set it as. However I'm having a problem in changing the background color according to the dropdown menu options.

HTML

<button class="btn-secondmenu">Button</button>

<select name="colors" id="colors">
    <option value="red">Red</option>
    <option value="green" selected="selected">Green</option>
    <option value="yellow">Yellow</option>
    <option value="black">Black</option>
</select>

JS

$(function(){
    var select = document.getElementById("colors");

    select.onchange = function(){
        var selectedColor = select.options[select.selectedIndex].value;
        alert(selectedString);
    }

    if (localStorage.getItem('background') !== null) {
        getColour = localStorage.background;
        $('.bdy').css('background', getColour);
    } else {
        getColour = 'green';
    }

    $('.btn-secondmenu').click(function(){
        if(getColour == 'blue'){
            localStorage.removeItem('background');
            $('.bdy').css('background', 'red');
            localStorage.setItem('background', 'red');
        } else {
            getColour = 'blue';
            localStorage.removeItem('background');
            $('.bdy').css('background', 'blue');
            localStorage.setItem('background', 'blue');
        }
    });
});

Any suggestions would be greatly appreciated, thank you!

local-storage css html jquery javascript
3 Answers

You are over complicating things here, you can achieve this in the onchange event of the dropdown, by getting the color with $(this).val() .

$('select[name="colors"]').change(function() {
  $('.bdy').css('background', $(this).val());
  localStorage.setItem('background', $(this).val());
});

Note:

There's no need to remove the item from the localStorage then reset it, only use .setItem() it will override the value of the item, if you check Storage.setItem() MDN Reference you can see that:

The setItem() method of the Storage interface, when passed a key name and value, will add that key to the storage, or update that key's value if it already exists.

Demo:

$('select[name="colors"]').change(function() {
  $('.bdy').css('background', $(this).val());
  //localStorage.setItem('background', $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bdy">
  <select name="colors" id="colors">
                <option value="red">Red</option>
                <option value="green" selected="selected">Green</option>
                <option value="yellow">Yellow</option>
                <option value="black">Black</option>
  </select>
</div>

user_36696240

You should use

$('.bdy').css('background-color', getColour);

If that is body tag then better to use:

$('body').css('background-color', getColour);
user_8365510

Here is simple, easy to understand and complete working solution:

Your HTML with some better naming:

    <button id="changeColorButton" class="btn-secondmenu">Button</button>


    <select name="colors" id="changeColorSelect">
            <option value="red">Red</option>
            <option value="green" selected="selected">Green</option>
            <option value="yellow">Yellow</option>
            <option value="black">Black</option>
    </select>

And jQ can be as short as this:

$('#changeColorButton').click(function() {
    var color = $('#changeColorSelect').val();
    $('body').css("background-color",color);
})

You can see it in action here: ( I could do a one-liner but harder to read).

working JSFiddle demo

user_54397820
Related