メインdiv内の新しい段落ごとに編集ボタンを作成する方法。 JavaScript

Question

JavaScriptを使って非常に基本的なToDoリストを作成しようとしています これは私が今までに得たものです。 div要素の中に、私は今、私はあることを、また、ボタン要素を作成し、混乱していますトップ

var newtask = document.getElementById('newTask'); 
var btn = document.getElementById('add'); 
var nTaskPlace = document.getElementById('nTaskPlace'); 


function AddTask() { 
var paragraph = document.createElement('p'); 
var insidep = document.createTextNode(newtask.value); 
var btnEdit = document.createElement('button'); 
var btnText = document.createTextNode('Edit'); 

paragraph.appendChild(insidep); 
btnEdit.appendChild(btnText); 
paragraph.appendChild(btnEdit); 

nTaskPlace.insertBefore(paragraph, nTaskPlace.firstChild); 



} 

btn.addEventListener('click', AddTask); 

上にあるように、入力内の異なる値を持つ各ボタンをクリックし、そのそれぞれの新しいPに動的にPを作成するために作られました各pの隣に、この編集ボタンをクリック可能にし、値を変更するか、その内側のpを変更します。私はどのように行うか分からない。 JavaScriptが私を狂っている。

Answer 1

私は右の権利を持っていて、編集ボタンを使ってタスクを編集して保存したいのであれば、最も単純な方法でこれを行うコードです。私が何をしたか

var newtask = document.getElementById('newTask'); 
var btn = document.getElementById('add'); 
var nTaskPlace = document.getElementById('nTaskPlace'); 

var AddTask = function() { 
    var containerDiv = document.createElement('div'); 
    var paragraph = document.createElement('p'); 
    paragraph.innerHTML = newtask.value; 
    var editInput = document.createElement('input'); 
    editInput.style.display= 'none'; 
    editInput.value = newtask.value; 
    var btnEdit = document.createElement('button'); 
    btnEdit.innerHTML = 'Edit'; 
    var btnSave = document.createElement('button'); 
    btnSave.innerHTML = 'Save'; 
    btnSave.style.display= 'none'; 
    btnEdit.addEventListener('click', function(){ 
     editInput.style.display = 'inline-block'; 
     paragraph.style.display = 'none'; 
     btnSave.style.display = 'inline-block'; 
     btnEdit.style.display = 'none'; 
    }); 
    btnSave.addEventListener('click',function(){ 
     editInput.style.display = 'none'; 
     paragraph.style.display = 'inline-block'; 
     btnSave.style.display = 'none'; 
     btnEdit.style.display = 'inline-block'; 
     paragraph.innerHTML = editInput.value;  
    }); 
    containerDiv.appendChild(paragraph); 
    containerDiv.appendChild(editInput); 
    containerDiv.appendChild(btnEdit); 
    containerDiv.appendChild(btnSave); 
    newtask.value = ''; 
    nTaskPlace.insertBefore(containerDiv, nTaskPlace.firstChild); 
} 
btn.addEventListener('click', AddTask); 

HTML

<div id="nTaskPlace"> 
    <div id="addNew"> 
     <input id="newTask" type="text"> 
     <button id="add"> add </button> 
    </div> 
</div> 

私は余分なテキストボックスを作成し、それを隠し行い、「保存」し、それがあまりにも隠さ作るための1つの余分のボタンということです。 次に、編集ボタンごとにイベントを追加して、同じ行のpとpを非表示にして保存ボタンを表示すると、新しい入力、保存ボタンが状態を反転し、両方のボタンをクリックするとpとtextboxの両方にvaleが保存されます。ここ

はあなたのコード

Answer 2

anglejに精通している場合、角度双方向バインディングを使用できます。

javascriptが 使用使用する場合： VARのval =のdocument.getElementById（id_of_p）.VALUEを、（自分のpタグから値を取得） のdocument.getElementById（id_of_button）.innerHtml =ヴァル; （ボタンに値を設定する）