Search code examples
javascriptjqueryhtmlcodemirror

CodeMirror Change Theme from Button

http://jsbin.com/uJUzU/8/edit

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?

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<link rel="stylesheet" href=http://codemirror.net/doc/docs.css>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-day.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css">
<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-light.css">
<link rel="stylesheet" href="http://codemirror.net/theme/blackboard.css">
<link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">
<link rel="stylesheet" href="http://codemirror.net/theme/eclipse.css">
<link rel="stylesheet" href="http://codemirror.net/theme/elegant.css">
<link rel="stylesheet" href="http://codemirror.net/theme/erlang-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/lesser-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/midnight.css">
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css">
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css">
</head>
<body>
  <textarea id=code name=code>
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=utf-8&gt;
    &lt;title&gt;HTML5 canvas demo&lt;/title&gt;
    &lt;style&gt;p {font-family: monospace;}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Canvas pane goes here:&lt;/p&gt;
    &lt;canvas id=pane width=300 height=200&gt;&lt;/canvas&gt;
    &lt;script&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);
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea>
    <iframe id=preview></iframe>

    <p>Select a theme: <select onchange="selectTheme()" id=select>
        <option value="0" selected>default</option>
        <option value="1">3024-day</option>
        <option value="2">3024-night</option>
        <option value="3">ambiance</option>
        <option value="4">base16-dark</option>
        <option value="5">base16-light</option>
        <option value="6">blackboard</option>
        <option value="7">cobalt</option>
        <option>eclipse</option>
        <option>elegant</option>
        <option>erlang-dark</option>
        <option>lesser-dark</option>
        <option>midnight</option>
        <option>monokai</option>
        <option>neat</option>
        <option>night</option>
    </select></p>

  <button id="changetheme" onclick="themechange()" style="margin-top: -35px; float: right;">Cobalt</button>
</body>
</html>

CSS

.CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
}

iframe {
    width: 49%;
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0px;
}

Javascript

// 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);}
Solution

  • Change the code at the very bottom to this:

    $(function() {
    $('#changetheme').click(toggletheme);

    function toggletheme() {
        $("#select").val(8).trigger('change');
    }
});

    The reason it wasn't working was because you were selecting an a element with id changetheme, while the actual button was a button element. Another problem was that just changing the value of the select menu doesn't trigger the change event, so you have to manually trigger it.