Localstorage selection Javascript - save style CSS
<p>I want to make a drop down menu with three selections that change the color of the <code>nav</code> and saves it in local storage, when you update the page the color you picked is still there. </p>

<p>I want to do this in Javascript and not with any help from jQuery. </p>

<p>Here is my HTML:</p>

<pre><code>&lt;nav id="box"&gt;
   &lt;select&gt;
      &lt;option value="grey" id="grey"&gt;Grey&lt;/option&gt;
      &lt;option value="black" id="black"&gt;Black&lt;/option&gt;
      &lt;option value="green" id="green"&gt;Green&lt;/option&gt;
   &lt;/select&gt;
&lt;/nav&gt;
</code></pre>

<p>Here is my CSS:</p>

<pre><code>#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;
}
</code></pre>

<p>Here is my JS:</p>

<pre><code>function setUp() {
   document.getElementById("grey").onclick = setSuccessStyle;
   document.getElementById("black").onclick = setErrorStyle;
   document.getElementById("green").onclick = setInfoStyle;
}

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";
}
</code></pre>

<p>I know that I'm not supposed to have onclick as the "action" but I have no idea how to solve this. </p>