Entonces, básicamente, estoy tratando de reemplazar el valor del lapso, pero arroja un error después de hacer clic
const addListenerToEditButtons = (arr) => { const updatedButtons = document.querySelectorAll('.container-buttons__update'); updatedButtons.forEach((button, index) => { button.addEventListener('click', (e) => { const targetSpan = e.target.parentElement.parentElement.parentElement.children[3].children[0]; const targetInput = e.target.parentElement.parentElement.parentElement.children[3].children[1]; toggleEditMode(targetSpan, targetInput); editNote(arr, index, targetSpan, targetInput); }) }) } const toggleEditMode = (span, input) => { if (input.classList.contains(HIDE_ELEMS)) { span.classList.add(HIDE_ELEMS); input.classList.remove(HIDE_ELEMS); return } span.classList.remove(HIDE_ELEMS); input.classList.add(HIDE_ELEMS); } const editNote = (arr, index, span, input) => { arr.filter((item, i) => { if (i === index && input.value !== '') { item.content = input.value; return } toggleEditMode(); }) showAllNotes(arr); } Recibo un error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
aquí puedes probar mi código: https://codesandbox.io/s/winter-silence-yjxo3?file=/package.json
classList no está definido porque no pasó el elemento span & input en la función toggleEditMode . Esto resolvería su error, pero su aplicación no funcionará aún porque no espera la entrada del usuario antes de ejecutar la función toggleEditMode nuevamente. Por lo tanto, el usuario ni siquiera tendrá tiempo para completar algo.
En mi opinión, esperar la entrada del usuario va en contra de los principios de JavaScript. Una mejor solución sería adjuntar un oyente de entrada a todos los elementos de entrada como este:
const addListenerToEditButtons = (arr) => { const updatedButtons = document.querySelectorAll( ".container-buttons__update" ); updatedButtons.forEach((button, index) => { const targetSpan = button.parentElement.parentElement.children[3] .children[0]; const targetInput = button.parentElement.parentElement.children[3] .children[1]; targetInput.addEventListener("input", (evt) => { targetSpan.innerText = evt.target.value; // here you set the span to the value of the input. You would probably want to store it somewhere here. }); button.addEventListener("click", (e) => { toggleEditMode(targetSpan, targetInput); // here you make the input field visible when the edit button is clicked. }); }); Luego, en su función toggleEditMode de edición, también puede colocar el texto existente en el campo de entrada y tal vez enfocarse automáticamente en él. Si solo desea guardar el valor cuando el usuario vuelve a hacer clic en el botón de edición, este sería el lugar para hacerlo:
const toggleEditMode = (span, input) => { if (input.classList.contains(HIDE_ELEMS)) { span.classList.add(HIDE_ELEMS); input.classList.remove(HIDE_ELEMS); input.value = span.innerText; input.focus(); // so that the input field can automatically be typed into. return; } span.classList.remove(HIDE_ELEMS); input.classList.add(HIDE_ELEMS); };