JavaScript - Erstellen einer Funktion zum Bearbeiten von Listenelementen

Question

Ich habe eine einfache To-Do-Anwendung in HTML5 erstellt. Ich habe eine Schaltfläche zum Hinzufügen und Löschen von Elementen hinzugefügt.
Ich kann jedoch nicht herausfinden, wie Sie Elemente bearbeiten. Irgendeine Idee, wie man eine Funktion schafft, wodurch ich Gegenstände auf dieser Liste bearbeiten könnte?

function get_todos() { 
 
    var todos = new Array; 
 
    var todos_str = localStorage.getItem('todo'); 
 
    if (todos_str !== null) { 
 
    todos = JSON.parse(todos_str); 
 
    } 
 
    return todos; 
 
} 
 

 
function add() { 
 
    var task = document.getElementById('task').value; 
 
    var todos = get_todos(); 
 
    todos.push(task); 
 
    localStorage.setItem('todo', JSON.stringify(todos)); 
 
    show(); 
 
    return false; 
 
} 
 

 
function remove() { 
 
    var id = this.getAttribute('id'); 
 
    var todos = get_todos(); 
 
    todos.splice(id, 1); 
 
    localStorage.setItem('todo', JSON.stringify(todos)); 
 
    show(); 
 
    return false; 
 
} 
 

 
function show() { 
 
    var todos = get_todos(); 
 
    var html = '<ul class="list">'; 
 
    for (var i = 0; i < todos.length; i++) { 
 
    html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">Delete</button> <button class="remove" id="' + i + '">Edit</button></li>'; 
 
    }; 
 
    html += '</ul>'; 
 
    document.getElementById('todos').innerHTML = html; 
 
    var button_delete = document.getElementsByClassName('remove'); 
 
    for (var i = 0; i < button_delete.length; i++) { 
 
    button_delete[i].addEventListener('click', remove); 
 
    }; 
 
} 
 
document.getElementById('add').addEventListener('click', add); 
 
show();

<div id="content" style=""> 
 
    <!--Grid View Page--> 
 
    <div class="panel" title="Title"> 
 
    <input id="task"><button id="add">Add</button> 
 
    <div id="todos"></div> 
 
    </div> 
 
</div>

Answer 1

So jetzt Ihr auf Click-Handler ruft einfach entfernen - auch wenn die ‚Bearbeiten‘ Benutzer klickt - so würden Sie erkennen müssen, welche Taste sie treffen, und rufen Sie die entsprechende Funktion.

Der Grund dafür ist, dass wenn Sie die ID für die Schaltflächen ausschreiben - die Bearbeitungsschaltflächen haben dieselbe Klasse ('remove') - also werden sie zusammen mit den Löschbuttons ausgelöst.

Also das erste, was zu tun wäre, den Bearbeitungsschaltflächen ihre eigene Klasse zu geben. Ich würde auch jedem Listenelement seine eigene ID geben, so dass Sie diese einfach von Ihrer Bearbeitungsfunktion aus ansprechen können.

var html = '<ul class="list">'; 
    for(var i=0; i<todos.length; i++) { 
     var list_element = "<li id=item'"+i+"'>"; 
     html += list_element + todos[i] + '<button class="remove" id="' + i + '">Delete</button> <button class="edit" id="edit' + i + '">Edit</button></li>'; 
    }; 
    html += '</ul>'; 

Dann müssen Sie eine weitere Schleife schreiben, um die Buttons bearbeiten zielen, so dass sie Ihre Bearbeitungsfunktion anstelle der Löschfunktion aufrufen.

etwas wie folgt aus:

var button_edit = document.getElementsByClassName('edit'); 

    for (var i=0; i < button_delete.length; i++) { 
     button_edit[i].addEventListener('click', edit); 
    }; 

Sie auch - aussehen könnte in mit JQuery [https://jquery.com/] - es macht die Auswahl und die Reaktion auf DOM-Objekte einfacher flexibler als schlicht Javascript.