Question

我正在尝试使用JavaScript制作非常基本的待办事项列表这是我到目前为止所得到的。在div内部，我在每个按钮上动态创建p，在输入中使用不同的值，因此每个新p都在顶部

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。我不知道该怎么做。 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>

我所做的是我创建了额外的文本框并将其隐藏起来，还有一个额外的按钮用于保存＆＃34;并使它隐藏起来。然后为每个编辑按钮添加事件以隐藏自身和同一行中的p并显示保存按钮和新输入，保存按钮将反转状态，两个按钮点击将保存p和文本框中的值。

这是您的代码的Demo

Answer 2

如果您熟悉angularjs，则可以使用有角度的双向绑定。

如果你想使用javascript 使用： var val = document.getElementByid（id_of_p）.value;（从p标签中获取值）的document.getElementById（id_of_button）.innerHtml = VAL; （将值设置为按钮）

如何在主div内的每个新段落上创建一个编辑按钮。 JavaScript的

2 个答案: