需要幫助弄清楚為什么我無法在我的代碼游樂場使用Javascript獲取某個textarea元素的內容

Question

我正在使用代碼鏡像構建代碼游樂場。 我的問題是我無法從html，css和js的textarea元素中獲取內容。 除了那些textarea元素之外，我還創建了一個textarea，以查看我從textarea獲取內容的代碼是否有問題。 因此，在我的html中，我當然具有textarea標簽。 我給這個新的textarea一個類名“ txtb”，並為名為“ AlertContent（）”的函數創建了一個帶有onclick屬性的鏈接。 這是該函數的javascript：

function AlertContent(){

alert(document.getElementsByClassName('txtb')[0].value);  

}

猜猜它有什么用。 當我鍵入具有“ txtb”類的textarea元素，然后單擊調用我創建的函數AlertContent（）的鏈接時，我看到一個消息框出現，顯示我在該textarea中鍵入的文本。 有用。 但是，當我嘗試將類分配給我與Code Mirror一起使用的textarea元素，並使用相同的功能從這些textarea元素獲取值或內容時，即使有文本（html ，css，js）在這些textarea元素中。 我要做的就是創建一個函數，該函數將獲取textarea元素（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>

Answer 1

為什么不使用編輯器提供的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>

需要幫助弄清楚為什么我無法在我的代碼游樂場使用Javascript獲取某個textarea元素的內容

問題描述

1 個解決方案

解決方案1
1 已采納 2013-09-24 20:35:48

需要幫助弄清楚為什么我無法在我的代碼游樂場使用Javascript獲取某個textarea元素的內容

問題描述

1 個解決方案

解決方案1 1 已采納 2013-09-24 20:35:48

解決方案1
1 已采納 2013-09-24 20:35:48