Buen dia comunidad, tengo la siguente duda: Teniendo esto:
element.classList.toggle("fas");
element.classList.toggle("completeIcon");
element.classList.toggle("far");
Porque no funciona igual haciendo esto?:
element.classList.toggle("fas", "completeIcon", "far"); 
El método classList.toggle() acepta un solo argumento que es el nombre de la clase que se va a agregar o quitar del elemento. En el primer ejemplo que proporcionaste, se están usando tres llamadas separadas del método classList.toggle() para agregar o quitar las tres clases diferentes, una por una.
La primera línea reemplaza la clase "far" con "fas", mientras que la segunda línea agrega la clase "completeIcon".
El método classList.toggle() acepta un solo argumento que es el nombre de la clase que se va a agregar o quitar del elemento. En el primer ejemplo que proporcionaste, se están usando tres llamadas separadas del método classList.toggle() para agregar o quitar las tres clases diferentes, una por una.
En el segundo ejemplo que proporcionaste, estás pasando tres argumentos separados por comas al método classList.toggle(), lo cual no es la forma en que se usa este método. Es decir, el segundo ejemplo no funcionará porque el método classList.toggle() solo espera un argumento (el nombre de la clase que se agregará o quitará).
Para lograr el mismo resultado en una sola línea de código, podrías usar la siguiente sintaxis:
element.classList.replace("far", "fas"); element.classList.add("completeIcon");
La primera línea reemplaza la clase "far" con "fas", mientras que la segunda línea agrega la clase "completeIcon".