Estoy trabajando en una tarea en la que hacer clic en un botón cambiará la expresión facial y la imagen de fondo del botón.

así que cuando hago clic en el botón, mi texto puede cambiar de feliz - triste - feliz, etc. Sin embargo, el código no funciona igual para mi imagen, donde la imagen no cambia en absoluto al hacer clic, al igual que para el cambio de la ruta de la boca, el detector de eventos de clic solo funciona en el primer clic (cambiando cara triste a cara feliz). no funciona para clics posteriores. ¿Puedo saber si alguien tiene alguna idea de dónde me equivoqué?

Este es el código javascript que tengo ahora:

 let buttonState = "Sad"; let toggeleButton = document.getElementById("button"); toggeleButton.addEventListener("click", function(ev){ console.log("toggle button is working"); if(ev.target.textContent === 'Sad'){ buttonState = "Happy"; //changing button text and image ev.target.textContent = "Happy"; ev.target.background ="https://cdn.pixabay.com/photo/2016/07/10/10/54/marguerite-1507550_960_720.jpg"; //step 4 mouth.attr({ "path" : (`M 200,150 Q 300,250 450,150`)}); } else { buttonState = "Sad"; //changing button text and image ev.target.textContent = "Sad"; ev.target.background = "https://cdn.pixabay.com/photo/2014/09/21/14/39/surface-455124_960_720.jpg"; //step 4 mouth.attr({ "path" : (`M 200,150 Q 300,250 450,150`)}); } });

Para mi código HTML:

 <button id="button" class="button">Sad</button>