Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Cambio de estilo tarea realizada

Buenas tardes, quise que al hacer click en el icono de check para indicar que la tarea estaba realizada el texto de ésta se subrayara en color rojo, lo logre, pero el problema es que siempre cambia la primera tarea agregada sin importar cual estoy seleccionando, el color del icono si cambia como debe ser.

Muchas gracias

Codigo de la fucnion realizadaSeleccionando la tarea1 como realizadaseleccionando la tarea2 como realizada

3 respuestas

Hola Julian, espero que estés bien.

Esto sucede porque la función "textoCompleto" está obteniendo el elemento por una clase que se utiliza en todas las tarjetas, lo que significa que siempre seleccionará el primer elemento, ya que "querySelector" siempre devuelve el primer elemento que coincide con el parámetro especificado, en este caso, la clase "card".

En su lugar, se puede utilizar el mismo método que se utilizó anteriormente, que consiste en obtener el elemento específico que se ha hecho clic en el evento utilizando "event.target"

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

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

Hola buenas noches, agradezco la respuesta, pero la verdad no me quedo muy claro intente realizar lo siguiente, y funciona pero no en el texto si no en el icono, es decir subraya el icono del check.

Gracias por la ayuda

const checkComplet = () =>{
const i = document.createElement("i"); // se crea el elemento i 
i.classList.add("far", "fa-check-circle","icon" );   // se agregan las clases que permiten modificar por el css
i.addEventListener("click", tareaCompleta); // evento que ocurre al hacer click, se invoca la funcion "tareaCompleta"
i.addEventListener("click", textoCompleto);
return i
};
    const tareaCompleta= (event) =>{
    const elemento= event.target;
    elemento.classList.toggle("fas"); // agrega clase "add" - "toggle" si la clase existe la quita y si no existe la pone
    elemento.classList.toggle("completeIcon"); // agrega clase "add"
    elemento.classList.toggle("far"); // quita clase "remove"
   };

   const textoCompleto = (event) => {
   const a = event.target;
   a.classList.toggle("completeTask");
   console.log( a );
};


export default checkComplet;

Hola Julian, espero que estés bien.

Si tu texto viene antes del icono de check puedes usar previousElementSibling;

 const textoCompleto = (event) => {
   const a = event.target.previousElementSibling;
   a.classList.toggle("completeTask");
   console.log( a );

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

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