1
respuesta

[Duda] No hubo ningún cambio en mi formulario

Referente al curso JS en la Web: Manipulación del DOM con JavaScript, en el capítulo Concluir una tarea y actividad Creando el botón concluir

por SilviaJulianaRocioDiazDiaz
| 105k xp | 188 posts

Hola, de nuevo! Sucede que mi formulario no imprime el texto que le escribo. Aquí voy a dejar primero mi código y, después, dos pantallazos como ejemplo.

const btn = document.querySelector("[data-form-btn]");

const createTask = (evento)=> {
    evento.preventDefault();
    const input = document.querySelector;('[data-form-input]');
    const value = input.value;
    const list = document.querySelector('[data-list]');
    const task = document.createElement('li');
    task.classList.add('card');
    input.value =" ";
    //backsticks

    console.log(checkComplete());
    const taskContent = document.createElement("div");
    taskContent.appendChild(checkComplete());
    const titleTask = document.createElement("span");
    titleTask.classList.add("task");
    titleTask.innerText = value;
    taskContent.appendChild(titleTask);
    const content =
        
    <i class= "fas fa-trash-alt trashIcon icon"></i>
    //task.innerHTML = content;
    task.appendChild(taskContent)

    list.appendChild(task);

    console.log(content);
};

console.log(btn);


btn.addEventListener("click", ) 

const checkComplete = () => {
    const i = document.createElement("i");
    i.classList.add("far");
    i.classList.add("fa-check-square");
    i.classList.add("far fa-check-square icon");

    return i
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadY ahora, les mostraré lo que ocurre cuando pulso el botón de agregar: no hay ningún cambio Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
por Bruno Botelho de Souza
| 3905.5k xp | 14841 posts
Alura Scuba Team Scuba Team | Front-end

Hola Silvia,

Gracias por compartir tu código y las capturas de pantalla.

Deberías pasar la función createTask como argumento en addEventListener de esta manera:

btn.addEventListener("click", createTask);

Por lo tanto, tu código corregido debería verse así:

const btn = document.querySelector("[data-form-btn]");

const createTask = (evento)=> {
    evento.preventDefault();
    const input = document.querySelector('[data-form-input]');
    const value = input.value;
    const list = document.querySelector('[data-list]');
    const task = document.createElement('li');
    task.classList.add('card');
    input.value =" ";

    const taskContent = document.createElement("div");
    taskContent.appendChild(checkComplete());
    const titleTask = document.createElement("span");
    titleTask.classList.add("task");
    titleTask.innerText = value;
    taskContent.appendChild(titleTask);
    const content = '<i class= "fas fa-trash-alt trashIcon icon"></i>'
    task.appendChild(taskContent)
    list.appendChild(task);
};

btn.addEventListener("click", createTask) 

const checkComplete = () => {
    const i = document.createElement("i");
    i.classList.add("far");
    i.classList.add("fa-check-square");
    i.classList.add("far fa-check-square icon");

    return i
}

Espero que esto resuelva tu problema. Si no es así, por favor, proporciona más detalles para que pueda entender mejor el problema.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!