title: Javascript function to change put border around selected divs
body: <p>So I have a Javascript function that is part of web game I'm creating. It is supposed to act as the speed selector for an object in the game. Selecting the <code>div</code> that says "slow" is supposed to change the object's speed to slow, and so forth. When the page is loaded, the "med" div is selected. For now, I just want to figure out why my attempt at putting a border around the currently selected speed <code>div</code> is not working. The code below is, hopefully, self-explanatory. (Here's a link to the game, if that helps: <a href="http://jaminweb.com/snake_TEST_PHP.php" rel="nofollow">http://jaminweb.com/snake_TEST_PHP.php</a>)</p>
  
  <p>I'm not getting any errors in my Javascript console and I've tested (using an <code>alert(...)</code>) to make sure the onlick functions are being called for each of the 3 divs when I click on them.</p>
  
  <p>Any help greatly appreciated. </p>
  
  <p>Relevant pieces of code: </p>
  
  <pre><code>    function speedController(slowButtonID, medButtonID, fastButtonID, sg)
      {
      /*
           slowButtonID, medButtonID, fastButtonID: IDs of the buttons for slow, medium and fast, respectively
  
           sg: Snake game object
      */
  
          this.spdMap = {"slow" : [slowButtonID, 200], "med" : [medButtonID, 100], "fast" : [fastButtonID , 50]};
  
          this.curSpd = "med";
  
          this.changeSpeed = function(newSpd)
          {
          /*
              newSpd: one of "slow", "med" or "fast"
          */
              /* Do nothing if selecting same speed as current */
              if (newSpd == this.curSpd)
                  return;
  
              /* Else, remove border from currently selected speed button 
                 and add border to newly selected speed button, then 
                 change the speed of the snake's mover.
              */
              $("#"+this.spdMap[this.curSpd[0]]).css("border: 0px;");
              $("#"+this.spdMap[newSpd[0]]).css("border: 4px solid #3D4048;");
              sg.mover = setInterval(sg.move(), this.spdMap[newSpd[1]]);
          }
      }
  </code></pre>
  
  <hr>
  
  <pre><code>        &lt;div id="snakeSpdDiv"&gt;
              &lt;p&gt;&lt;b&gt;Speed:&lt;/b&gt;&lt;/p&gt;
              &lt;div class="snakeSpdBtn" id="snakeSpdSlow"&gt;Slow&lt;/div&gt;
              &lt;div class="snakeSpdBtn" id="snakeSpdMed" style="border: 4px solid #3D4048;"&gt;Med&lt;/div&gt;
              &lt;div class="snakeSpdBtn" id="snakeSpdFast" onlick=&gt;Fast&lt;/div&gt;
              &lt;script type="text/javascript"&gt;
                  var sc = new speedController("snakeSpdSlow", "snakeSpdMed", "snakeSpdFast", s);
                  $("#snakeSpdSlow").click(function()
                  { 
                      sc.changeSpeed("slow");
                  });
                  $("#snakeSpdMed").click(function() 
                  { 
                      sc.changeSpeed("med"); 
                  });
                  $("#snakeSpdFast").click(function()
                  { 
                      sc.changeSpeed("fast"); 
                  });
              &lt;/script&gt;
          &lt;/div&gt;
  </code></pre>