Javascript 使编辑按钮功能正常工作

我有以下代码：

function appendText(){

        var text = document.getElementById('usertext').value;

            if ( document.getElementById('usertext').value ){

                var div = document.createElement('div');
                div.className = 'divex';

                var li = document.createElement('li');
                li.setAttribute('id', 'list');  
                div.appendChild(li);

                var texty = document.createTextNode(text);
                var bigdiv = document.getElementById('addedText');

                var editbutton = document.createElement('BUTTON');
                editbutton.setAttribute('id', 'button_click');
                var buttontext = document.createTextNode('Edit');
                editbutton.appendChild(buttontext); 

                bigdiv.appendChild(li).appendChild(texty);
                bigdiv.appendChild(li).appendChild(editbutton);

                editbutton.onclick = makeAreaEditable;
                var makeAreaEditable = function(){

                            var textareaEdit = document.createElement('textarea');
                            textareaEdit.onclick = myFunction;
                            textareaEdit.customProperty = li.value;

                            function myFunction(e){
                                var objLi = e.currentTarget;
                                objLi.value = objLi.customProperty;
                                document.getElementByID("button_click").value = "ok";
                            };
                        };

                document.getElementById('usertext').value = "";   
        }        
};

以及以下html：

             <textarea id="usertext"></textarea>
    <button onClick="appendText()">Add text </button>

    <div id="addedText" style="float:left">
    </div>

添加文本

---

我希望我的makeAreaEditable函数能够像这样工作：当我单击edit按钮时，一个文本区域将显示其中的li.value。因此，我可以编辑文本（按钮也将从“编辑”更改为“确定”）。我希望这是纯javascript的

好吧，有几件事

首先，我改变了这一行：

if ( document.getElementById('usertext').value ){

为此：

if ( text ).value ){

我已将ID添加到按钮：

<button onClick="appendText()" id="button_click">Add text </button>

您可以在这里找到可行的JSFIDLE：

如果添加2个或更多元素（单击addtext 2次），它们都具有相同的id（按钮clic）。所以不要认为代码

document.getElementByID("button_click").value

会有用的

第二，您正在创建一个div元素var div，并将li元素添加到该div中。但之后您什么也不做，因为您将li direclty分配给了bigdiv

---

关于我最后的评论，您必须创建函数，然后将它们添加到元素中。现在，用另一种方法，将函数分配给元素，然后定义函数。您必须将textareaEdit添加到元素中。否则它将永远不会显示在页面上

您的代码应该如下所示

function appendText(){

        var text = document.getElementById('usertext').value;

            if ( document.getElementById('usertext').value ){

                var div = document.createElement('div');
                div.className = 'divex';

                var li = document.createElement('li');
                li.setAttribute('id', 'list');
                div.appendChild(li);

                var texty = document.createTextNode(text);
                var bigdiv = document.getElementById('addedText');

                var editbutton = document.createElement('BUTTON');
                editbutton.setAttribute('id', 'button_click');
                var buttontext = document.createTextNode('Edit');
                editbutton.appendChild(buttontext);

                var makeAreaEditable = function(){
                            function myFunction(e){
                                var objLi = e.currentTarget;
                                objLi.value = objLi.customProperty;
                                document.getElementByID("button_click").value = "ok";
                            };
                            var textareaEdit = document.createElement('textarea');
                            textareaEdit.customProperty = li.value;
                            textareaEdit.onclick = myFunction;
                            bigdiv.appendChild(li).appendChild(textareaEdit);
                        };
                editbutton.onclick = makeAreaEditable;
                bigdiv.appendChild(li).appendChild(texty);
                bigdiv.appendChild(li).appendChild(editbutton);
                document.getElementById('usertext').value = "";
        }
};

更新代码

函数appendText（）{

---

您也可以给我们提供

jsfiddle.net

链接，这将是启动li的最佳方式。单击“添加文本”按钮后，li将自动弹出，该按钮将触发“追加文本”功能。带有“编辑”按钮的li将自动弹出文本区域下面的链接。这是链接。因此，当我按下“编辑”时，我希望该值在文本区域的同一行上自动弹出。。然后我可以制作另一个函数来保存每一行的编辑这对我来说很好…jsfiddle.net/vUpSz makeArea可编辑是个问题。你必须创建你的函数，然后将它们添加到元素中。现在你可以用另一种方法，将一个函数分配给一个元素，然后反求很好的功能。你必须将textarea edit添加到元素中。否则它将永远不会显示在页面上。请参阅我的下一个答案抱歉，但当看到发生的情况时，我需要在textarea中输入li的值，当我单击edit时，它只会附加textareas，我只需要在其中输入li的值这是我在中键入d时生成的代码e textarea并添加它

dEdit

。因此li的值是0。看这里是我在查询中创建的代码！我希望它在纯js中也这样做…当我单击“编辑”时不做任何事情。获取引用错误：未定义事件。但您会混淆，请参见

function appendText(){

        var text = document.getElementById('usertext').value;

            if ( document.getElementById('usertext').value ){

                var div = document.createElement('div');
                div.className = 'divex';

                var li = document.createElement('li');
                li.setAttribute('id', 'list');
                div.appendChild(li);

                var texty = document.createTextNode(text);
                var bigdiv = document.getElementById('addedText');

                var editbutton = document.createElement('BUTTON');
                editbutton.setAttribute('id', 'button_click');
                var buttontext = document.createTextNode('Edit');
                editbutton.appendChild(buttontext);

                var makeAreaEditable = function(){
                            function myFunction(e){
                                var objLi = e.currentTarget;
                                objLi.value = objLi.customProperty;
                                document.getElementByID("button_click").value = "ok";
                            };
                            var textareaEdit = document.createElement('textarea');
                            textareaEdit.customProperty = li.value;
                            textareaEdit.onclick = myFunction;
                            bigdiv.appendChild(li).appendChild(textareaEdit);
                        };
                editbutton.onclick = makeAreaEditable;
                bigdiv.appendChild(li).appendChild(texty);
                bigdiv.appendChild(li).appendChild(editbutton);
                document.getElementById('usertext').value = "";
        }
};

        var text = document.getElementById('usertext').value;

            if ( text ){


                var li = document.createElement('li');
                li.setAttribute('id', 'list');
                li.innerHTML=text;
                li.customProperty = text;
                var editbutton = document.createElement('BUTTON');
                editbutton.setAttribute('id', 'button_click');
                editbutton.setAttribute('value','Edit');
                editbutton.innerHTML='Edit';



                var makeAreaEditable = function(){
                            function myFunction(e){
                                var objLi = e.currentTarget;
                                objLi.value = objLi.customProperty;
                                document.getElementById("button_click").value = "ok";
                                document.getElementById("button_click").innerHTML='ok';
                            };
                            var textareaEdit = document.createElement('textarea');
                            textareaEdit.customProperty = li.customProperty;
                            textareaEdit.onclick = myFunction;
                            li.appendChild(textareaEdit);
                        };
                editbutton.onclick = makeAreaEditable;


                var bigdiv = document.getElementById('addedText');
                li.appendChild(editbutton);
                bigdiv.appendChild(li);
                document.getElementById('usertext').value = "";
        }
};