I would like to create a visual effect for when each attack happens in this JS code

doAttack(attacking, attacked) {
        if(attacking.life <= 0 || attacked.life <=0 ) {
            log.addMessage('O inimigo está morto.');
            return;
        }
        const attackFactor = (Math.random(2) * 2).toFixed(2);
        const defenseFactor = (Math.random(2) * 2).toFixed(2);

        const actualAttack = attacking.attack * attackFactor;
        const actualDefense = attacked.defense * defenseFactor;

        if(actualAttack > actualDefense) {
            attacked.life -= actualAttack;
            attacked.life = attacked.life < 0 ? 0 : attacked.life;

            log.addMessage(`${attacking.name} causou ${actualAttack.toFixed(2)} de dano em ${attacked.name}`)
        } else {
            log.addMessage(`${attacked.name} conseguiu dar parry.`)
        }

        this.checkBattleEnd();
        this.update();
    },

I tried this, but each time I added any code in the doAttack method the attacks stopped working, I was expecting that with the creation of perfomVisualEffect and adding him inside the doAttack method the flash effect should work. I’m new at JS and trying to learn, the first step was to create a battle simulation, and worked fine, now I’m looking to improve the simulation with visual effects.

doAttack(attacking, attacked) {
    if (attacking.life <= 0 || attacked.life <= 0) {
        log.addMessage('O inimigo está morto.');
        return;
    }

    const attackFactor = Math.random() * 2;
    const defenseFactor = Math.random() * 2;

    const actualAttack = attacking.attack * attackFactor;
    const actualDefense = attacked.defense * defenseFactor;

    if (actualAttack > actualDefense) {
        attacked.life -= actualAttack;
        attacked.life = Math.max(attacked.life, 0);

        this.performVisualEffect(attacked);
        
        log.addMessage(`${attacking.name} causou ${actualAttack.toFixed(2)} de dano em ${attacked.name}`);
    } else {
        log.addMessage(`${attacked.name} conseguiu dar parry.`);
        this.update();
    }

    this.checkBattleEnd();
}

performVisualEffect(character) {
    const attackedEl = this.getFighterElement(character);

    // Add the 'attacked' class to trigger the visual effect
    attackedEl.classList.add('attacked');

    // Listen for the 'transitionend' event to ensure the visual effect is complete
    attackedEl.addEventListener('transitionend', () => {
        attackedEl.classList.remove('attacked');
        this.update();
    }, { once: true }); // Use { once: true } to remove the listener after it's triggered
}