title: Change style/class with javascript on keydown
body: <p>I'm trying to change the style of an element using javascript on a keydown event. I've already done it with mouse clicks like this :</p>
  
  <pre><code>#mpc ul li:active {
   background:#844;
  </code></pre>
  
  <p>And these are the original properties of the element im trying to change:</p>
  
  <pre><code>&lt;div id="mpc"&gt;
  
   &lt;div id="wrapper"&gt;
  
    &lt;ul&gt;
     &lt;li id="kickDrum_p1"&gt;1&lt;p&gt;Kick&lt;/p&gt;&lt;/li&gt;
     &lt;li id="snareDrum_p2"&gt;2&lt;p&gt;Snare&lt;/p&gt;&lt;/li&gt;
     &lt;li id="closedHiHat_p3"&gt;3&lt;p&gt;ClosHat&lt;/p&gt;&lt;/li&gt;
     &lt;li id="openHiHat_p4"&gt;4&lt;p&gt;Open HiHat&lt;/p&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
   &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the original css.</p>
  
  <pre><code>#mpc ul li {
  background:#999;
  }
  </code></pre>
  
  <p>I'm really new to css/html and javascript and haven't started learning jquery so I prefer doing it all by javascript and css. </p>
  
  <p>The idea is to assign a different key to every list item and when that key is pressed on the page, the list item's background changes, just like I've done the click event. The difference with the click event is I've made it so it doesn't follow the id's since you manually select the list item you want and then it changes it's style. </p>
  
  <p>With key input however I need to specify which list item exactly I'm targeting. </p>
  
  <p>So I think I need to create a new css class with the properties of the background I want the element to change to and using javascript to tell that when I press the 'H' key for example it should change the element's style to that and when I let go of the key to reverse it back to normal. If that makes sense. I do not know how to ahcieve that.</p>
  
  <p>EDIT:</p>
  
  <p>This is how I tried to do it:</p>
  
  <pre><code>var keypress = document.getElementById("kickDrum_p1")[0]
  
  document.addEventListener("keydown", function (e) {
  if(e.keyCode == 69) {
  var key = e.keyCode
  var color = keypress.getElementByClassName("color")
  if(color.length !=0 ){
      cur = color[0]
      cur.className = " "
  }
  
  cur.className="color"
  }
  
  });
  </code></pre>
  
  <p>And in the styles I have this:</p>
  
  <pre><code>#mpc ul li.color {
  background:#844;
  }
  </code></pre>