title: CodeMirror Change Theme from Button
body: <p><a href="http://jsbin.com/uJUzU/8/edit" rel="nofollow">http://jsbin.com/uJUzU/8/edit</a></p>
  
  <p>I've been trying to change the theme from default to cobalt and idk what I'm doing wrong. Can anyone help guide me the right direction, and explain what I'm doing wrong?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;CodeMirror: HTML5 preview&lt;/title&gt;
  &lt;link rel="stylesheet" href=http://codemirror.net/doc/docs.css&gt;
  &lt;script src="http://codemirror.net/lib/codemirror.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css"&gt;
  &lt;script src="http://codemirror.net/mode/xml/xml.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/javascript/javascript.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/css/css.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/keymap/extra.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/3024-day.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/base16-light.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/blackboard.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/eclipse.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/elegant.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/erlang-dark.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/lesser-dark.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/midnight.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/monokai.css"&gt;
  &lt;link rel="stylesheet" href="http://codemirror.net/theme/neat.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;textarea id=code name=code&gt;
  &amp;lt;!doctype html&amp;gt;
  &amp;lt;html&amp;gt;
    &amp;lt;head&amp;gt;
      &amp;lt;meta charset=utf-8&amp;gt;
      &amp;lt;title&amp;gt;HTML5 canvas demo&amp;lt;/title&amp;gt;
      &amp;lt;style&amp;gt;p {font-family: monospace;}&amp;lt;/style&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
      &amp;lt;p&amp;gt;Canvas pane goes here:&amp;lt;/p&amp;gt;
      &amp;lt;canvas id=pane width=300 height=200&amp;gt;&amp;lt;/canvas&amp;gt;
      &amp;lt;script&amp;gt;
        var canvas = document.getElementById('pane');
        var context = canvas.getContext('2d');
  
        context.fillStyle = 'rgb(250,0,0)';
        context.fillRect(10, 10, 55, 50);
  
        context.fillStyle = 'rgba(0, 0, 250, 0.5)';
        context.fillRect(30, 30, 55, 50);
      &amp;lt;/script&amp;gt;
    &amp;lt;/body&amp;gt;
  &amp;lt;/html&amp;gt;&lt;/textarea&gt;
      &lt;iframe id=preview&gt;&lt;/iframe&gt;
  
      &lt;p&gt;Select a theme: &lt;select onchange="selectTheme()" id=select&gt;
          &lt;option value="0" selected&gt;default&lt;/option&gt;
          &lt;option value="1"&gt;3024-day&lt;/option&gt;
          &lt;option value="2"&gt;3024-night&lt;/option&gt;
          &lt;option value="3"&gt;ambiance&lt;/option&gt;
          &lt;option value="4"&gt;base16-dark&lt;/option&gt;
          &lt;option value="5"&gt;base16-light&lt;/option&gt;
          &lt;option value="6"&gt;blackboard&lt;/option&gt;
          &lt;option value="7"&gt;cobalt&lt;/option&gt;
          &lt;option&gt;eclipse&lt;/option&gt;
          &lt;option&gt;elegant&lt;/option&gt;
          &lt;option&gt;erlang-dark&lt;/option&gt;
          &lt;option&gt;lesser-dark&lt;/option&gt;
          &lt;option&gt;midnight&lt;/option&gt;
          &lt;option&gt;monokai&lt;/option&gt;
          &lt;option&gt;neat&lt;/option&gt;
          &lt;option&gt;night&lt;/option&gt;
      &lt;/select&gt;&lt;/p&gt;
  
    &lt;button id="changetheme" onclick="themechange()" style="margin-top: -35px; float: right;"&gt;Cobalt&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.CodeMirror {
      float: left;
      width: 50%;
      border: 1px solid black;
  }
  
  iframe {
      width: 49%;
      float: left;
      height: 300px;
      border: 1px solid black;
      border-left: 0px;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>// Initialize CodeMirror editor with a nice html5 canvas demo.
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true
  });
  
  // Sets the theme
  var input = document.getElementById("select");
  
  function selectTheme() {
      var theme = input.options[input.selectedIndex].innerHTML;
      editor.setOption("theme", theme);
  }
  
  function themechange() {
      var cobalt = input.options[input.value = "7"].innerHTML;
      editor.setOption("theme", cobalt);}
  </code></pre>