使编辑按钮功能正常工作

Question

我有以下代码：

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 函数像这样工作：当我单击编辑按钮时，一个文本区域将出现，其中包含 li.value。所以我可以编辑文本（按钮也会从编辑变为确定）。我想要这个在纯 javascript 中

Answer 1

如果添加 2 个元素（单击 addtext 2 次）或更多，它们都具有相同的 id (button_clic)。所以不要想代码

document.getElementByID("button_click").value

会起作用的。

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

关于我最后的 cmets，您必须创建自己的函数，然后将它们添加到元素中。现在你反过来做，你将一个函数分配给一个元素，然后定义这个函数。而且您必须将 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 = "";
        }
};