Bokchee 88 Bokchee 88 - 2 months ago 5
CSS Question

How to make an edit button on each new paragraphs inside main div. JavaScript

I am trying to make very basic todo list with JavaScript
This is what i got so far. Inside div, i made to create p dynamically on each button click with different value inside an input, so each new p, to be on top

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 );


Now i am confused, i created also a button element, to be next to each p.Now, i want this edit button to be clickable, and to change the value or whatever its inside p. I am not sure how to do. JavaScript is making me crazy.

Answer

If i undrstand right and you want to make edit button to edit the task and save it, so here is code that make this in the most simple way.

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>

what i did is that i create extra text box and make it hidden, and one extra button for "save" and make it hidden too. then add event for each edit button to hide itself and the p in the same row and show save button and the new input, save button will reverse state and both button clicks will save the vale in both p and textbox.

here is a Demo for your code