0

我有以下代码：

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

4

3 回答 3

1

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

document.getElementByID("button_click").value

将工作。

第二，您正在创建一个 div 元素 var div 并将 li 元素添加到该 div。但是之后你什么都不做，因为你将 li 直接分配给了 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 = "";
        }
};
于 2013-01-16T09:40:17.630 回答
0

好吧，有几件事...

首先，我改变了这一行：

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

对此：

if ( text ).value ){

我已将 ID 添加到按钮：

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

并将这条线推低：

 editbutton.onclick = makeAreaEditable;

你可以在这里找到可行的 jsfiddle： JSFIDDLE

于 2013-01-16T08:49:52.000 回答
0

更新代码

函数追加文本（）{

        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 = "";
        }
};
于 2013-01-16T11:03:40.987 回答