Accediendo a innerHTML en Javascript para addEventListener

Probé 2 piezas de código, una de ellas funcionó y la otra no, y no estoy seguro de por qué sucedió, ya que ambas piezas de código se ven similares para mí. Lo que quiero hacer es imprimir un texto diferente cada vez que un usuario hace clic en un botón. Primero, el código que no funcionó como quería y el resultado siempre era err y cada vez que hacía clic en él, ni el texto cambió ni la consola, excepto por el número junto a err que seguía aumentando.

function func1() {
    let x = document.getElementById("test1").innerHTML;
    if (x===""){
        x = "Primer clic";
        console.log("err");
    }
    else if (x==="Primer clic") {
        x = "Segundo clic";
        console.log("err2");
    }
    else {
        x = "Tercer clic";
    }
}

document.getElementById("click").addEventListener("click", func1);

Y la segunda pieza de código que funcionó perfectamente es:

function func1() {
    let x = document.getElementById("test1");
    if (x.innerHTML===""){
        x.innerHTML = "Primer clic";
        console.log("err");
    }
    else if (x.innerHTML==="Primer clic") {
        x.innerHTML = "Segundo clic";
        console.log("err2");
    }
    else {
        x.innerHTML = "Tercer clic";
    }
}

document.getElementById("click").addEventListener("click", func1);