html - Need help figuring out why I can't get the content of a certain textarea element with Javascript for my code playground -

-

i'm building code playground using code mirror. issue i'm not able content textarea elements have html, css, , js. created textarea aside textarea elements see if code getting content textarea had issues. in html, of course have textarea tags. gave new textarea class name "txtb" , created link onclick attribute function called "alertcontent()". here javascript function:

function alertcontent(){  alert(document.getelementsbyclassname('txtb')[0].value);    }

and guess what, works. when type textarea element has class "txtb", , click link calls function alertcontent() created, see message box appear displaying text typed textarea. works. however, when try give classes textarea elements i'm using code mirror, , use same function value or content textarea elements, end getting blank message box though there's text (html, css, js) in textarea elements. want do, create function content of textarea elements (html, css, js) can save database. appreciate help. here's code i'm using code mirror.

<!-- 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> <!-- html/xml --> <script src="http://codemirror.net/mode/xml/xml.js"></script> <script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script> <!-- css --> <script src="http://codemirror.net/mode/css/css.js"></script> <!-- 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 rely  // on codemirror's onchange option gets  // triggered on setvalue  // render();  // not important - if need  // should go css  /*  fixing height of codemirror.  might want in css instead  of js , override styles main  codemirror.css */  var cms = document.queryselectorall('.codemirror');  (var = 0; < 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');  (i = 0; < cms.length; i++) {  cms[i].style.height = '100%';  }*/  }());  // adding cm options  cm_opt['extrakeys'] = {  tab: function(instance) {  if (inst.somethingselected())  codemirror.commands.indentmore(inst);  else  codemirror.commands.inserttab(inst);  }  }  </script>

why don't use get_value() provided on editors? example, html_editor.getvalue()

here example page doing alert write in codemirror textarea when click respective editor's button.

<!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 html</button>         </div>         <div id="css" class="code_box">             <h3>css</h3>             <textarea class="mycss" name="css"></textarea>             <button onclick="viewcss()">alert css</button>         </div>         <div id="js" class="code_box">             <h3>javascript</h3>             <textarea class="myjs" name="js"></textarea>             <button onclick="viewjs()">alert js</button>         </div>     </section>      <div id="output">         <iframe></iframe>     </div>      <script src="http://codemirror.net/lib/codemirror.js"></script>     <!-- html/xml -->     <script src="http://codemirror.net/mode/xml/xml.js"></script>     <script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>     <!-- css -->     <script src="http://codemirror.net/mode/css/css.js"></script>     <!-- 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 rely         // on codemirror's onchange option gets         // triggered on setvalue         // render();         // not important - if need         // should go css         /*         fixing height of codemirror.         might want in css instead         of js , override styles main         codemirror.css         */         /*         var cms = document.queryselectorall('.codemirror');         (var = 0; < 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');         (i = 0; < cms.length; i++) {             cms[i].style.height = '100%';         }*/          // adding cm options         cm_opt['extrakeys'] = {             tab: function(instance) {             if (inst.somethingselected())                 codemirror.commands.indentmore(inst);             else                 codemirror.commands.inserttab(inst);             }         }     }());      </script> </body> </html>

Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more

erlang - Saving a digraph to mnesia is hindered because of its side-effects -

-
updated the digraph library in erlang implements data type side-effectful. each operation on data type saves new state in ets table -- instead of returning altered version of itself, more common in functional languages. the problem usage perspective, impedes effort store or pass around state in convenient way requiring me first "collect" state before can start juggle around. the closest solution have seen far serializer/deserializer , these have drawback tied current structure of digraphs instead of operating on abstract type -- prevents future proof solution. update pascal pointed out serializer utilizes interface of digraph, , hence eliminates drawback mentioned above. better, albeit still inconvenient, see no better alternative. what recommendation on how store digraphs? should go different data type altogether? thanks. i not sure understand concern. fact digraph stored in ets transparent in user interface, might want chnge either exchange digr...
Read more