javascript - CodeMirror Change Theme from Button

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=.css>
<script src=".js"></script>
<link rel="stylesheet" href=".css">
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>

<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".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);}

http://jsbin./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/doc/docs.css>
<script src="http://codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror/lib/codemirror.css">
<script src="http://codemirror/mode/xml/xml.js"></script>
<script src="http://codemirror/mode/javascript/javascript.js"></script>
<script src="http://codemirror/mode/css/css.js"></script>
<script src="http://codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror/keymap/extra.js"></script>

<link rel="stylesheet" href="http://codemirror/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror/theme/3024-day.css">
<link rel="stylesheet" href="http://codemirror/theme/3024-night.css">
<link rel="stylesheet" href="http://codemirror/theme/ambiance.css">
<link rel="stylesheet" href="http://codemirror/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror/theme/base16-light.css">
<link rel="stylesheet" href="http://codemirror/theme/blackboard.css">
<link rel="stylesheet" href="http://codemirror/theme/cobalt.css">
<link rel="stylesheet" href="http://codemirror/theme/eclipse.css">
<link rel="stylesheet" href="http://codemirror/theme/elegant.css">
<link rel="stylesheet" href="http://codemirror/theme/erlang-dark.css">
<link rel="stylesheet" href="http://codemirror/theme/lesser-dark.css">
<link rel="stylesheet" href="http://codemirror/theme/midnight.css">
<link rel="stylesheet" href="http://codemirror/theme/monokai.css">
<link rel="stylesheet" href="http://codemirror/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);}

Share Improve this question edited Sep 1, 2013 at 17:46 asked Sep 1, 2013 at 14:57 Michael Schwartz 8,45514 gold badges90 silver badges153 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CodeMirror Change Theme from Button - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)