javascript - 无法使用 js/jquery 获取多个元素上的 Codemirror textarea 值

Question

我正在尝试获取我的textarea codemirror的值以将json发送到服务器以在编辑后保存它们，但我无法选择元素...我也尝试通过id获取元素.. 。一样。我明白了:

Cannot read property 'value' of null

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
    <link rel="stylesheet" href="http://esironal.github.io/cmtouch/lib/codemirror.css">
    <script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
<div><textarea class="yyyyyy232" id="scripttextarea_1"></textarea><button type="submit" class='yy4e' id='btn_1'>Save1</button></div>
<div><textarea class="yyyyyy232" id="scripttextarea_2"></textarea><button type="submit" class='yy4e' id='btn_2'>Save2</button></div>
<div><textarea class="yyyyyy232" id="scripttextarea_3"></textarea><button type="submit" class='yy4e' id='btn_3'>Save3</button></div>
<script>
$(document).ready(function() {
        myTextarea=document.getElementsByClassName('yyyyyy232');
        console.log($(myTextarea).length);

            for (i=0;i<myTextarea.length;i++){

                cm=CodeMirror.fromTextArea($(myTextarea[i])[0], {
                    mode: "python",
                    lineNumbers: true,
                    lineWrapping: true,
                    indentUnit: 4,
                    height: 400
                });
            };
});


$('.yy4e').on('click',function(e){
            e.preventDefault();
            ppp=$(this).attr('id').split('_')[1];
            xx=document.getElementById("scripttextarea_"+ppp);

                cm=CodeMirror.fromTextArea(xx).getValue();
                console.log(cm);

          $.getJSON('/edit_scripts',{
               'command' : cm
           },function(data){
               console.log('edited');
            })
        });

</script>           

一些帮助真的很棒，因为这个问题困扰了我好几个小时。谢谢

Answer 1

$(document).ready(function() {
            myTextarea=document.getElementsByClassName("yyyyyy232");
            console.log($(myTextarea).length);
            var cm = new Array();
                 for (i=0;i<myTextarea.length;i++){

                    cm[i]=CodeMirror.fromTextArea($(myTextarea[i])[0], {
                        mode: "python",
                        lineNumbers: true,
                        lineWrapping: true,
                        indentUnit: 4,
                        height: 400
                    });
                };

                $(".yy4e").on("click",function(e){
                            e.preventDefault();
                            ppp=$(this).attr("id").split("-")[1];
                            numcode= parseInt(ppp)-1;
                             xx=$("#scripttextarea_"+ppp).attr("id");
                             console.log(xx);


                              var   Code=cm[numcode].getValue();
                                console.log(Code);

                          $.getJSON("/test",{
                               "command" : cm[numcode]
                           },function(data){
                               console.log("edited");
                            })
                        });


    });

 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
        <script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
        <link rel="stylesheet" href="http://esironal.github.io/cmtouch/lib/codemirror.css">
        <script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
    <div><textarea class="yyyyyy232" id="scripttextarea_1"></textarea><button type="submit" class="yy4e" id="btn-1">Save1</button></div>
    <div><textarea class="yyyyyy232" id="scripttextarea_2"></textarea><button type="submit" class="yy4e" id="btn-2">Save2</button></div>
    <div><textarea class="yyyyyy232" id="scripttextarea_3"></textarea><button type="submit" class="yy4e" id="btn-3">Save3</button></div>
  

这是您的代码的一个工作示例 你有几个问题，其中一个是上面提到的关于 btn 名称的问题 第二次点击文档准备就绪 第三，您将所有代码镜像标识为值 cm，并且应为数组 cm[] 您需要通过cm[]数组编号调用文本区域值