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函数能够像这样工作：当我单击编辑按钮时，textarea会显示其中的li.value。所以我可以编辑文本（按钮也会从编辑更改为确定）。我希望在纯javascript中使用它

Answer 1

如果添加2个元素（单击addtext 2次）或更多，它们都具有相同的ID（button_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 = "";
        }
};

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

更新代码

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

使编辑按钮功能正常工作

3 个答案: