使“編輯”按鈕功能正常工作

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個元素（單擊添加文本2次）或更多，則它們都具有相同的ID（button_clic）。 所以不要認為代碼

document.getElementByID("button_click").value

將工作。

第二，您要創建一個div元素var div，並將li元素添加到該div中。 但是之后您什么也不用做，因為您將li diclclty分配給了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 = "";
        }
};

Answer 2

好吧，有幾件事...

首先，我更改了這一行：

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

對此：

if ( text ).value ){

我已將ID添加到按鈕：

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

並將這條線推低：

 editbutton.onclick = makeAreaEditable;

可行的jsfiddle可以在這里找到： JSFIDDLE

Answer 3

更新的代碼

函數appendText（）{

        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 = "";
        }
};