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 関数を次のように動作させたい: 編集ボタンをクリックすると、テキストエリアが表示され、その中に li.value が表示されます。テキストを編集できます（ボタンも編集からOKに変わります）。私は純粋なJavaScriptでこれが欲しい

4

3 に答える 3

1

2 つの要素 (addtext を 2 回クリック) またはそれ以上を追加すると、それらはすべて同じ ID (button_clic) になります。だから、コードを考えないでください

document.getElementByID("button_click").value

動作します。

次に、div 要素 var div を作成し、その div に li 要素を追加します。しかし、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 = "";
        }
};
于 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

更新されたコード

関数 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 = "";
        }
};
于 2013-01-16T11:03:40.987 に答える