Modifier le gestionnaire pour que le compteur décroisse, et qu'il…

const bouton = document.getElementById("compter");
const affichage = document.getElementById("total");
let compteur = 0;

bouton.addEventListener("click", function () {
    if (compteur > 0) {
        compteur = compteur - 1;
        affichage.textContent = compteur;
    }
});

Le test est placé avant la décrémentation : on refuse le coup, on ne le répare pas après coup. Écrire l'inverse — décrémenter, puis if (compteur < 0) { compteur = 0; } — donne le même affichage, mais laisse la variable passer par $-1$ ; si un autre morceau de code lit compteur entre-temps, il lit une valeur interdite.

Une variante plus honnête envers l'utilisateur : au lieu de ne rien faire, désactiver le bouton quand il n'y a plus rien à retirer.

bouton.addEventListener("click", function () {
    compteur = compteur - 1;
    affichage.textContent = compteur;
    bouton.disabled = (compteur === 0);
});

Il faut alors penser à bouton.disabled = true; au chargement, puisque le compteur démarre à zéro.

Contrôle : avec la première version, cinq clics sur un compteur à $3$ affichent $2$, $1$, $0$, $0$, $0$. Aucun clic n'échoue, aucun ne descend sous zéro.

Piège : croire que bouton.disabled = true protège quoi que ce soit. C'est un confort d'interface : un bouton grisé se réactive en trois secondes dans les outils de développement. Le test dans le gestionnaire, lui, est la vraie garantie — et si le compteur avait un sens côté serveur, il faudrait l'y vérifier aussi.