需要帮助弄清楚为什么我无法使用 Javascript 为我的代码游乐场获取某个文本区域元素的内容
Need help figuring out why I can't get the content of a certain textarea element with Javascript for my code playground
我正在使用Code Mirror构建一个代码游乐场。我的问题是我无法从 html、css 和 js 的文本区域元素中获取内容。除了这些文本区域元素之外,我还创建了一个文本区域,以查看我用于从文本区域获取内容的代码是否有问题。所以在我的html中,我当然有textarea标签。我给这个新的文本区域一个类名"txtb",并为一个名为"AlertContent(("的函数创建了一个带有onclick属性的链接。以下是该函数的 JavaScript:
function AlertContent(){
alert(document.getElementsByClassName('txtb')[0].value);
}
你猜怎么着,它有效。当我键入具有类"txtb"的文本区域元素,然后单击调用我创建的函数 AlertContent(( 的链接时,我看到出现一个消息框,显示我在该文本区域中键入的文本。它有效。但是,当我尝试为与 Code Mirror 一起使用的 textarea 元素提供类,并使用相同的函数从这些 textarea 元素中获取值或内容时,即使这些 textarea 元素中有文本(html、css、js(,我最终也会得到一个空白消息框。我想做的,就是创建一个函数来获取文本区域元素(html,css,js(的内容,这样我就可以将其保存到我的数据库中。我真的很感激你的帮助。这是我用于代码镜像的代码。
<!-- Code Editors -->
<section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<form><textarea class="MyHtml" name="htmlcode"></textarea></form>
</div>
<div id="css" class="code_box">
<h3>CSS</h3>
<textarea class="MyCss" name="css"></textarea>
</div>
<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea class="MyJs" name="js"></textarea>
</div>
</section>
</div>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<!-- For HTML/XML -->
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<!-- For CSS -->
<script src="http://codemirror.net/mode/css/css.js"></script>
<!-- For JS -->
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
</div>
</div>
<script>
(function() {
// Base template
var base_tpl =
"<!doctype html>'n" +
"<html>'n't" +
"<head>'n't't" +
"<meta charset='"utf-8'">'n't't" +
"<title>Test</title>'n'n't't'n't" +
"</head>'n't" +
"<body>'n't'n't" +
"</body>'n" +
"</html>";
var prepareSource = function() {
var html = html_editor.getValue(),
css = css_editor.getValue(),
js = js_editor.getValue(),
src = '';
// HTML
src = base_tpl.replace('</body>', html + '</body>');
// CSS
css = '<style>' + css + '</style>';
src = src.replace('</head>', css + '</head>');
// Javascript
js = '<script>' + js + '<'/script>';
src = src.replace('</body>', js + '</body>');
return src;
};
var render = function() {
var source = prepareSource();
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
};
// EDITORS
// CM OPTIONS
var cm_opt = {
mode: 'text/html',
gutter: true,
lineNumbers: true,
};
// HTML EDITOR
var html_box = document.querySelector('#html textarea');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
html_editor.on('change', function (inst, changes) {
render();
});
// CSS EDITOR
cm_opt.mode = 'css';
var css_box = document.querySelector('#css textarea');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
css_editor.on('change', function (inst, changes) {
render();
});
// JAVASCRIPT EDITOR
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#js textarea');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
js_editor.on('change', function (inst, changes) {
render();
});
// SETTING CODE EDITORS INITIAL CONTENT
html_editor.setValue('<p>Empty Room</p>');
css_editor.setValue('body { color: gray; }');
// RENDER CALL ON PAGE LOAD
// NOT NEEDED ANYMORE, SINCE WE RELY
// ON CODEMIRROR'S onChange OPTION THAT GETS
// TRIGGERED ON setValue
// render();
// NOT SO IMPORTANT - IF YOU NEED TO DO THIS
// THEN THIS SHOULD GO TO CSS
/*
Fixing the Height of CodeMirror.
You might want to do this in CSS instead
of JS and override the styles from the main
codemirror.css
*/
var cms = document.querySelectorAll('.CodeMirror');
for (var i = 0; i < cms.length; i++) {
cms[i].style.position = 'absolute';
cms[i].style.top = '30px';
cms[i].style.bottom = '0';
cms[i].style.left = '0';
cms[i].style.right = '0';
cms[i].style.height = '100%';
}
/*cms = document.querySelectorAll('.CodeMirror-scroll');
for (i = 0; i < cms.length; i++) {
cms[i].style.height = '100%';
}*/
}());
// Basically adding to the CM Options
cm_opt['extraKeys'] = {
Tab: function(instance) {
if (inst.somethingSelected())
CodeMirror.commands.indentMore(inst);
else
CodeMirror.commands.insertTab(inst);
}
}
</script>
为什么不使用编辑器上提供的get_value()
?例如,html_editor.getValue()
下面是一个示例页面,当您单击相应编辑器的按钮时,可以提醒您在 CodeMirror 文本区域中编写的内容。
<!DOCTYPE html>
<html>
<head>
<title>CodeMirror</title>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
</head>
<body>
<!-- Code Editors -->
<section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<form><textarea class="MyHtml" name="htmlcode"></textarea></form>
<button onclick="viewHTML()">Alert this HTML</button>
</div>
<div id="css" class="code_box">
<h3>CSS</h3>
<textarea class="MyCss" name="css"></textarea>
<button onclick="viewCSS()">Alert this CSS</button>
</div>
<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea class="MyJs" name="js"></textarea>
<button onclick="viewJS()">Alert this JS</button>
</div>
</section>
<div id="output">
<iframe></iframe>
</div>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<!-- For HTML/XML -->
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<!-- For CSS -->
<script src="http://codemirror.net/mode/css/css.js"></script>
<!-- For JS -->
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script>
(function() {
// Base template
var base_tpl =
"<!doctype html>'n" +
"<html>'n't" +
"<head>'n't't" +
"<meta charset='"utf-8'">'n't't" +
"<title>Test</title>'n'n't't'n't" +
"</head>'n't" +
"<body>'n't'n't" +
"</body>'n" +
"</html>";
window.viewHTML = function() {
alert(html_editor.getValue());
}
window.viewCSS = function() {
alert(css_editor.getValue());
}
window.viewJS = function() {
alert(js_editor.getValue());
}
var prepareSource = function() {
var html = html_editor.getValue(),
css = css_editor.getValue(),
js = js_editor.getValue(),
src = '';
// HTML
src = base_tpl.replace('</body>', html + '</body>');
// CSS
css = '<style>' + css + '</style>';
src = src.replace('</head>', css + '</head>');
// Javascript
js = '<script>' + js + '<'/script>';
src = src.replace('</body>', js + '</body>');
return src;
};
var render = function() {
var source = prepareSource();
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
};
// EDITORS
// CM OPTIONS
var cm_opt = {
mode: 'text/html',
gutter: true,
lineNumbers: true,
};
// HTML EDITOR
var html_box = document.querySelector('#html textarea');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
html_editor.on('change', function (inst, changes) {
render();
});
// CSS EDITOR
cm_opt.mode = 'css';
var css_box = document.querySelector('#css textarea');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
css_editor.on('change', function (inst, changes) {
render();
});
// JAVASCRIPT EDITOR
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#js textarea');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
js_editor.on('change', function (inst, changes) {
render();
});
// SETTING CODE EDITORS INITIAL CONTENT
html_editor.setValue('<p>Empty Room</p>');
css_editor.setValue('body { color: gray; }');
js_editor.setValue('var x = ''10'';');
// RENDER CALL ON PAGE LOAD
// NOT NEEDED ANYMORE, SINCE WE RELY
// ON CODEMIRROR'S onChange OPTION THAT GETS
// TRIGGERED ON setValue
// render();
// NOT SO IMPORTANT - IF YOU NEED TO DO THIS
// THEN THIS SHOULD GO TO CSS
/*
Fixing the Height of CodeMirror.
You might want to do this in CSS instead
of JS and override the styles from the main
codemirror.css
*/
/*
var cms = document.querySelectorAll('.CodeMirror');
for (var i = 0; i < cms.length; i++) {
cms[i].style.position = 'absolute';
cms[i].style.top = '30px';
cms[i].style.bottom = '0';
cms[i].style.left = '0';
cms[i].style.right = '0';
cms[i].style.height = '100%';
}
*/
/*cms = document.querySelectorAll('.CodeMirror-scroll');
for (i = 0; i < cms.length; i++) {
cms[i].style.height = '100%';
}*/
// Basically adding to the CM Options
cm_opt['extraKeys'] = {
Tab: function(instance) {
if (inst.somethingSelected())
CodeMirror.commands.indentMore(inst);
else
CodeMirror.commands.insertTab(inst);
}
}
}());
</script>
</body>
</html>
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 如何在php文件中获取$.post-ajax传递的值
- 在Shopify中获取博客文章的图片
- 使用Javascript获取所选选项ID
- 在jQuery中获取表的行索引
- 使用jquery将mysql数据获取到新的表行中
- 在动态创建的元素上获取对特定选择器的引用
- 从城市名称获取惊喜
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- 从ajax请求中获取javascript对象
- 如何从画布上的某个移动事件中获取X和Y
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在PHP中使用$_POST获取Select元素值
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 需要帮助弄清楚为什么我无法使用 Javascript 为我的代码游乐场获取某个文本区域元素的内容