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

functionsetUp(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;
}

<navid="box"><selectonchange="setUp(this)"><optionvalue="grey">Grey</option><optionvalue="black">Black</option><optionvalue="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.

functionsetUp() {
    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 partlocalStorage.setItem("box",this.value);     //'box' can be any string key you want
        };
    //load the old value from localStoragevar 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:

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

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

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

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

functionsetInfoStyle() {
  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;
}

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