Localstorage Selection Javascript - Save Style Css

I want to make a drop down menu with three selections that change the color of the nav and saves it in local storage, when you update the page the color you picked is still there.

Solution 1:

You have couple of issues in your code.

Basically you need to use onchange on the select but not click on the option.

After the user pick a color, you store it in the localStorage. When the page load, you read it from the localStorage and set the class with it value.

This snippet will not work because of security reason so you can see the result in this bin

function setUp(sel) {
  var messageBox = document.getElementById("box");
  messageBox.className = sel.value;
  localStorage.setItem('color', sel.value);
}

var selectElm = document.querySelector('select');
selectElm.value = localStorage.getItem('color') || selectElm.querySelector('option').getAttribute('value');
selectElm.onchange();

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(0, 72, 3, 0.47);
  border-color: #000;
}

<nav id="box">
  <select onchange="setUp(this)">
    <option value="grey">Grey</option>
    <option value="black">Black</option>
    <option value="green">Green</option>
  </select>
</nav>

Solution 2:

Here's an answer that uses your HTML and CSS as-is. Just replace your setUp function with this and make sure to call setUp on page load.

function setUp() {
    var box = document.getElementById("box").getElementsByTagName('select')[0];
    box.onchange = function(){
            switch(this.value){
                case 'grey':
                    setSuccessStyle();
                    break;
                case 'black':
                    setErrorStyle();
                    break;
                case 'green':
                default:
                    setInfoStyle();
                    break;
            }
            //localStorage part
            localStorage.setItem("box",this.value);     //'box' can be any string key you want
        };
    //load the old value from localStorage
    var selection = localStorage.getItem("box");
    if(selection !== null){
        var items = box.getElementsByTagName("option");
        for(var i=0; i<items.length; i++){
            if(items[i].value == selection){
                box.selectedIndex = i;
                break;
            }
        }
    }
}

Solution 3:

function setUp() {
  document.getElementById("select").addEventListener("change", onChangeSelect);
}

function onChangeSelect() {
  var value = document.getElementById("select").value;
  console.log(value);
  switch (value) {
    case "grey":
      setSuccessStyle();
      break;
    case "black":
      setErrorStyle();
      break;
    case "green":
      setInfoStyle();
      break;
  }
}

function setSuccessStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "grey"; 
}

function setErrorStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "black";
}

function setInfoStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "green";
}

setUp();

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(33.3, 46.7, 7.8);
  border-color: #000;
}

<nav id="box">
  <select id="select">
    <option value="grey" id="grey">Grey</option>
    <option value="black" id="black">Black</option>
    <option value="green" id="green">Green</option>
  </select>
</nav>