const addtasks = document.getElementById('task-add-btn').addEventListener('click', (event)=>{ const inputTask = document.createElement('input'); inputTask.type = 'text'; inputTask.placeholder = 'Add Task Description'; console.log(inputTask); document.querySelector('.display-result-div').appendChild(inputTask); inputTask.addEventListener('change', (event)=>{ fetch(`${window.origin}/add_task`, { method : "POST", credentials : 'include', body : JSON.stringify(event.target.value), cache : 'no-cache', headers : new Headers({ "content-type" : 'application/json' }) }); }); inputTask.remove(); });En el código anterior, estoy creando una etiqueta de entrada al hacer clic en el botón y luego la elimino de DOM después de obtener su valor. Quiero que suceda lo siguiente cada vez que hago clic en mi botón:
El código anterior no agrega la etiqueta de entrada al DOM después de que se elimina por primera vez.
Cualquier ayuda será apreciada. ¡Gracias!
Actualmente, está eliminando el elemento inputTask antes de que pueda cambiarse.
Sin embargo, antes de eliminarlo, verificaría si su solicitud de fetch devuelve una respuesta exitosa y también detectaría cualquier error:
const addtasks = document.getElementById('task-add-btn').addEventListener('click', (event) => { const inputTask = document.createElement('input'); inputTask.type = 'text'; inputTask.placeholder = 'Add Task Description'; document.querySelector('.display-result-div').appendChild(inputTask); inputTask.addEventListener('change', (event) => { fetch(`${window.origin}/add_task`, { method: "POST", credentials: 'include', body: JSON.stringify(event.target.value), cache: 'no-cache', headers: new Headers({ "content-type": 'application/json' }) }) .then(response => response.json()) .then(data => { console.log('Success:', data); inputTask.remove(); }) .catch((error) => { console.error('Error:', error); inputTask.remove(); // you may wish to keep the input field here in this case }); }); }); <div class="display-result-div"></div> <button id="task-add-btn">add</button>La input agregada se elimina al hacer clic en #task-add-btn . Idealmente, desearía eliminarlo una vez que el usuario ingrese algún texto y obtenga una respuesta exitosa del backend.
Por lo tanto, mover inputTask.remove() dentro del controlador de éxito de fetch API le daría el comportamiento esperado.
const addtasks = document.getElementById('task-add-btn').addEventListener('click', (event) => { const inputTask = document.createElement('input'); inputTask.type = 'text'; inputTask.placeholder = 'Add Task Description'; console.log(inputTask); document.querySelector('.display-result-div').appendChild(inputTask); inputTask.addEventListener('change', (event) => { console.log("change!!!"); // Simulating the success response using `setTimeout` and removing the // added input element after 1000ms setTimeout(() => { inputTask.remove(); }, 1000); /* // Ideally you would want to remove the newly added element once after getting the // success response from the backend ie, inside `.then` of the `fetch` API. fetch(`${window.origin}/add_task`, { method: "POST", credentials: 'include', body: JSON.stringify(event.target.value), cache: 'no-cache', headers: new Headers({ "content-type": 'application/json' }) }).then(res => { //Remove the element after success response inputTask.remove(); }).catch(err => { //Error handling }) */ }); }); <div class="display-result-div"></div> <button id="task-add-btn">Add Task</button> Para simplificar, aquí he usado setTimeout para eliminar el elemento después de 1000ms después de que el usuario ingrese algún texto en el elemento input recién agregado.