http://jsbin.com/EzaKuXE/1/edit
ボタンをクリックするたびにテーマをデフォルトからコバルトなどに変更しようとしましたが、一度テーマに切り替わり、元に戻りません。だから私はここにいる。誰でも正しい方向に導くことができますか? この単純な作業は面倒です。
コードの無関係な部分を .(ドット) に置き換えました。
HTML
<link rel="stylesheet" href=http://codemirror.net/doc/docs.css>
.
.
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css">
.
.
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css">
</head>
<body>
<textarea id=code name=code>
.
.
<iframe id=preview></iframe>
<p>Select a theme: <select onchange="selectTheme()" id=select>
<option value="0" selected>default</option>
.
.
<option>night</option>
</select></p>
<button id="changetheme" style="margin-top: -35px; float: right;">Cobalt</button>
</body>
</html>
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() {
$('#changetheme').click(themechange);
function themechange() {
if (
$("#select").val(0)) {
$("#select").val(7).trigger('change');
}
else if (
$("#select").val(7)) {
$("#select").val(0).trigger('change');
}
}
});